如何定位具有相同ID的div

Question

我目前有一些ASP.Net代碼，它們生成一個輸出，然后通過字符串文字顯示它。 這個想法是，對於每個Receipt ，都有一個“查看更多”按鈕，用於切換display: none;額外信息display: none; 首先。 我嘗試使用eq()方法來嘗試查找要切換的對象，因為我正在ul 。 我當前的代碼是這樣的：

$("#btn-expand").click(function () {
    var ldx = $("#list li .active").index(); // Get the list number so we know what ID to work with
    var idx = $("#expand").next().index(); // Get the next ID index point

    // Check that it isn't going negative
    if (idx == -1 || ldx == -1) {
        // If it is, reset ldx
        ldx = 0;
        idx = 0;
    }

    $("#expand").eq(ldx).toggle(); // Toggle that one
    console.log(ldx);
});

第一個按鈕可以正常工作， console.log顯示為0但是其他所有按鈕均不顯示任何內容。 我的HTML示例如下所示：

<ul id="list">
    <li class="active">
        Something <br />
        Something Again <br />
        <span id="btn-expand">[View more]</span>
        <div id="expand">
            Something hidden
        </div>
     </li>
     This <br />
     Shows <br />
     <span id="btn-expand">[View more]</span>
     <div id="expand">
         This is hidden until toggled
     </div>
     <li></li>
</ul>

ul有更多li元素，但這就是它的結構。 我也使用<span class="btn" id="btn-next">Next</span>通過每個循環li的ul真的讓我很困惑，為什么用了`#expand做同樣的方法”將無法正常工作。

如果有人能指出正確的方向，我將不勝感激。 謝謝。

 $(document).ready(function() { $("#btn-next").click(function() { var $list = $("#list li"); var idx = $(".active").removeClass("active").next().index(); if (idx == -1) { idx = 0; } $list.eq(idx).addClass("active"); }); $("#btn-prev").click(function() { var $list = $("#list li"); var idx = $(".active").removeClass("active").prev().index(); if (idx == -1) { idx = 0; } $list.eq(idx).addClass("active"); }); $("#btn-expand").click(function() { // Get the list number so we know what ID to work with var ldx = $("#list li .active").index(); // Get the next ID index point var idx = $("#expand").next().index(); // Check that it isn't going negative if (idx == -1 || ldx == -1) { // If it is, reset ldx ldx = 0; idx = 0; } // Toggle that one $("#expand").eq(ldx).toggle(); console.log(ldx); }); }); 

 #list { list-style: none; } .active { display: block; } #btn-expand { cursor: pointer; font-size: 9px; margin-left: 10px; } #expand { display: none; } li { display: none; } .btn { background: none; padding: 10px; border: 1px solid #000; margin-left: 50px; cursor: pointer; } 

 <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <ul id="list"> <li class="active"> Something here <br />Something here again <span id="btn-expand"> [View More] </span> <br /> <br /> <span id="expand"> This is hidden, shh.. </span> </li> <li> You can see this <br />Toggling shouldn't effect me <span id="btn-expand"> [View More] </span> <br /> <br /> <span id="expand"> But toggling should effect me! </span> </li> </ul> <span class="btn" id="btn-prev">Prev</span> - <span class="btn" id="btn-next">Next</span> 

Answer 1

id在同一文檔中應該是唯一的，用通用類rg替換重復的id ：

<ul id="list">
   <li class="active">
      Something <br />
      Something Again <br />
      <span class="btn-expand">[View more]</span>
      <div class="expand">
         Something hidden
      </div>
   </li>
      This <br />
      Shows <br />
      <span class="btn-expand">[View more]</span>
      <div class="expand">
         This is hidden until toggled
      </div>
   <li>
   </li>
</ul>

然后用類選擇器替換腳本中的id選擇器# . ：

$(".btn-expand").click(function() {
    // Get the list number so we know what ID to work with
    var ldx = $("#list li .active").index();
    // Get the next ID index point
    var idx = $(".expand").next().index();
    // Check that it isn't going negative
    if (idx == -1 || ldx == -1) {
      // If it is, reset ldx
      ldx = 0;
      idx = 0;
    }
    // Toggle that one
    $(".expand").eq(ldx).toggle();
    console.log(ldx);
});

您可以僅使用next()代替事件中的所有代碼：

$(this).next(".expand").toggle();
//OR
$(this).next().toggle();

希望這可以幫助。

---

 $(".btn-expand").click(function() { $(this).next(".expand").toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="list"> <li class="active"> Something <br /> Something Again <br /> <span class="btn-expand">[View more]</span> <div class="expand"> Something hidden </div> </li> <li> This <br /> Shows <br /> <span class="btn-expand">[View more]</span> <div class="expand"> This is hidden until toggled </div> </li> </ul> 

Answer 2

將ID更改為類，然后您需要做的就是：

$(".btn-expand").click(function() {
   $(this).next().toggle();
   $(this).text(function(_, oldText){
       return oldText.indexOf('More') === -1 ? 'View More' :'View Less';
   })
});

Answer 3

 $(document).ready(function() { $("#btn-next").click(function() { var $list = $("#list li"); var idx = $(".active").removeClass("active").next().index(); if (idx == -1) { idx = 0; } $list.eq(idx).addClass("active"); }); $("#btn-prev").click(function() { var $list = $("#list li"); var idx = $(".active").removeClass("active").prev().index(); if (idx == -1) { idx = 0; } $list.eq(idx).addClass("active"); }); $(".btn-expand").click(function() { // Toggle $(this).next().toggle(); }); }); 

 #list { list-style: none; } .active { display: block; } #btn-expand { cursor: pointer; font-size: 9px; margin-left: 10px; } li { display: none; } .btn { background: none; padding: 10px; border: 1px solid #000; margin-left: 50px; cursor: pointer; } .expand-inner { display:inline-block; width:100%; } 

 <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <ul id="list"> <li class="active"> Something here <br />Something here again <span class="btn-expand"> [View More] </span> <span style="display:none;"> <div class="expand-inner">This is hidden, shh..</div> </span> </li> <li> You can see this <br />Toggling shouldn't effect me <span class="btn-expand"> [View More] </span> <span style="display:none;"> <div class="expand-inner">But toggling should effect me!</div> </span> </li> </ul> <span class="btn" id="btn-prev">Prev</span> - <span class="btn" id="btn-next">Next</span>