如何定位具有相同ID的div

Question

我目前有一些ASP.Net代码,它构建一个输出,然后通过字符串文字显示它.我们的想法是,每个人Receipt都有一个"查看更多"按钮,可以切换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>

这里有很多li元素,ul但结构如何.我也在使用<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:

<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>