jQuery：從具有多個類的實例的對象訪問元素

我在想我可以把所有的按鈕都放在一個對象中，對內容div做同樣的操作，得到單擊按鈕的索引並使用該索引號訪問內容div，以使相應的內容顯示出來。我究竟做錯了什麼？

HTML：

<div class="row"> 
    <a class="btn" href="#">One</a> 
    <a class="btn" href="#">Two</a> 
    <a class="btn" href="#">Three</a> 
    <a class="btn" href="#">Four</a> 
</div> 
<div class="row"> 
    <div class="content">Content 1</div> 
    <div class="content">Content 2</div> 
    <div class="content">Content 3</div> 
    <div class="content">Content 4</div> 
</div>

的jQuery：

$(document).ready(function(){ 
    var $btn = $('.btn'); 
    var $content = $('.content'); 

    $btn.each(function(){ 
     $(this).on('click', function(){ 
      $content.hide(); 
      var i = $btn.index(this); 
      $content[i].show(); //This does not work 
     }); 
    }); 
});

的jsfiddle：http://jsfiddle.net/pcr0zuuo/

提前感謝！

來源

2015-11-10 ultimatecoder

您需要使用.EQ（（你試圖在本例中做的方式）實現它我）而不是[我]保持它作爲一個jQuery對象。 – Taplar

@Taplar可行！謝謝！！ – ultimatecoder

你的問題是show（）是一個jQuery函數。然而，關閉jQuery對象的偏移量[i]會返回原始dom元素。您應該使用eq（index）來取回jQuery對象以進行操作。

來源

2015-11-10 18:43:46 Taplar

本質上，問題是您嘗試在普通DOM節點上使用jQuery函數。您可以通過兩種方式解決這個問題：

$($content[i]).show()

或

$content.eq(i).show()

雙方應妥善包裝元素並顯示爲你所期望的。（http://jsfiddle.net/pcr0zuuo/1/）

來源

2015-11-10 18:45:56

jQuery的集合不是jQuery對象的數組，數組引用的是DOM對象。 $內容的集合無法用[]引用來運行jQuery函數。所以改爲：

$content.eq(i).show();

它在你的jsFiddle中有效。（感謝Taplar提示）

來源

2015-11-10 18:47:32 Alderin

你的邏輯是正確的。您可以定位.btn類的索引並顯示相應的div。

如果要使用jquery，請使用index()函數查找索引，並使用eq來定位索引。

$('.btn').click(function() 
{ 
    $('.content').eq($(this).index()).show(); 
});

http://jsfiddle.net/eqntjb01/

或者，您可以通過JavaScript

$('.btn').click(function() 
{ 
    $('.content')[$(this).index()].style.display = "block"; 
});

http://jsfiddle.net/eqntjb01/1/

來源

2015-11-10 18:49:41 DinoMyte

jQuery：從具有多個類的實例的對象訪問元素

回答

相關問題