在功能上使用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

回答

相關問題