在功能上使用javascript定位div id

我会马上进入它，这里有一个新手。在功能上使用javascript定位div id

我有一个在jQuery上运行的幻灯片，它也包含基于文本的内容（我们将称这个滑块为“主滑块”）。当你滑过时，内容会发生变化（很明显）。我想要做的是放置另一个较小的滑块，我们称之为“辅助滑块”为主滑块上的一个较大的幻灯片，以展示一些摄影内容。

我有问题。

我可以获得辅助滑块与主滑块在同一页面上工作，但当我将其“嵌入”到主滑块时遇到问题。我相信它与插件的目标div的方式有关。下面是标记：

<div id="img4" class="ctnsec"> 
    <div class="slidecontent"> 
     <div class="graphicleft"> 
      <ul> 
       <li style="float:left;line-height:55px;"> 
        <p class="topcopy">GRAPHIC DESIGN</p> 
       </li> 
       <li style="float:left;padding-left:100px;line-height:38px;"> 
        <p class="botcopy">SEE THE DIFFERENCE</p> 
       </li> 
      </ul> 
      <div class="clearme"></div> 
      <p>Lorum Ipsum</p> 
     </div> 
     <!--graphicleft--> 
     <div id="banner-slide"> 
      <ul class="bjqs"> 
       <li> 
        <img src="images/logos/crust.png" alt="under the crust" title="under the crust" /> 
       </li> 
       <li> 
        <img src="images/logos/space_la.png" alt="space la" title="space la" /> 
       </li> 
       <li> 
        <img src="images/logos/black_cat.png" alt="the black cat" title="the black cat" /> 
       </li> 
       <li> 
        <img src="images/logos/sia.png" alt="social investment advocates" title="social investment advocates" /> 
       </li> 
      </ul> 
     </div> 
     <!--banner-slide--> 
    </div> 
    <!--slidecontent--> 
</div> 
<!--img4-->

这里是被包含在页面上的插件的javascript：

jQuery(document).ready(function ($) { 

    $('#banner-slide').bjqs({ 
     animtype: 'slide', 
     height: 300, 
     width: 400, 
     responsive: true, 
     randomstart: true 
    }); 

});

好了，你怎么看这个插件的目标是“旗帜滑的DIV ID “有一类”bjqs？我需要知道如何告诉插件，我需要针对这些相同的东西，但在“img4”的div id中。是否有一种简单的方法可以解决这个问题？

在此先感谢帮助，我真的很感激它！

-Patrick

来源

2013-06-27 Patrick Ryan

请正确格式化您的代码，没有必要在左侧的所有这些空间（水平滚动是不好的）。 –

*“我需要知道如何告诉插件，我需要针对这些相同的东西，但在”img4“的div id内。”*这是否意味着您有多个具有相同ID的元素？ ID必须是唯一的！ –

不，我知道id必须是唯一的。我只在一个地方使用它。我只是有一个问题，插件无法识别位置，因为它位于父div内。 –

如果您有多个<div id="banner-slide">元素，这是无效的HTML，因为ID必须是唯一的。您应该改用<div class="banner-slide">。你似乎混淆使用.指示在CSS选择器类，并调用方法 -

$("#img4 .banner-slide .bjqs").bxSlider({ ... });

方法的名称为.bxSlider()，不.bjqs：

然后，你可以用它的目标在JavaScript/jQuery中。

来源

2013-06-27 01:01:28 Barmar

我不熟悉那个插件，我认为他只是在构建选择器时遇到困难。 – Barmar

感谢Barmar的建议，但似乎我有一个更大的问题。我需要找到将滑块放置在滑块内的解决方案。当没有嵌入到“主滑块”中时，滑块的插件在同一页面上工作，所以我不确定我的选项在这一点上... –

请参阅http://stackoverflow.com/questions/15806313/bxslider -in-bxslider嵌套 – Barmar

你可以说

$('#img4 #banner-slide').bjqs({ 
    animtype: 'slide', 
    height: 300, 
    width: 400, 
    responsive: true, 
    randomstart: true 
});

说了这么多，您使用的是横幅侧的ID，所以使用子选择并没有真正意义，因为只能有一个横幅幻灯片。

来源

2013-06-27 01:00:48

我明白了，所以我似乎有一个更大的问题。我试了两个答案，他们都没有工作。将滑块放置在滑块内必须是一个问题。我不知道是否有解决方案... –

在功能上使用javascript定位div id

回答

相关问题