[英]How to target a div with a same ID
I currently have some ASP.Net code that builds an output and then displays it through a string literal. 我目前有一些ASP.Net代码,它们生成一个输出,然后通过字符串文字显示它。 The idea is that for every Receipt
, there is a 'view more' button which toggles extra information that is display: none;
这个想法是,对于每个Receipt
,都有一个“查看更多”按钮,用于切换display: none;
额外信息display: none;
to start with. 首先。 I tried to use the eq()
method to attempt to find which one I wanted to toggle because I am doing that inside the ul
. 我尝试使用eq()
方法来尝试查找要切换的对象,因为我正在ul
。 My current code is this: 我当前的代码是这样的:
$("#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);
});
The first button works fine and console.log
shows 0
however, all the others do not show anything. 第一个按钮可以正常工作, console.log
显示为0
但是其他所有按钮均不显示任何内容。 A sample of my HTML looks like this: 我的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>
There is a lot more li
elements in the ul
but that is how it is structured. ul
有更多li
元素,但这就是它的结构。 I am also using <span class="btn" id="btn-next">Next</span>
to loop through each li
in the ul
so I am really confused why the same method for doing it with the `#expand' won't work. 我也使用<span class="btn" id="btn-next">Next</span>
通过每个循环li
的ul
真的让我很困惑,为什么用了`#expand做同样的方法”将无法正常工作。
If anyone could point me in the right direction, I'd be appreciated. 如果有人能指出正确的方向,我将不胜感激。 Thanks. 谢谢。
$(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>
id
should be unique in same document, replace the duplicate ones by general class, rg : 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>
Then replace id selector #
in you script by class selector .
然后用类选择器替换脚本中的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);
});
You could use just next()
instead of all the code in your event : 您可以仅使用next()
代替事件中的所有代码:
$(this).next(".expand").toggle();
//OR
$(this).next().toggle();
Hope this helps. 希望这可以帮助。
$(".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>
Change id's to classes and all you need then is: 将ID更改为类,然后您需要做的就是:
$(".btn-expand").click(function() {
$(this).next().toggle();
$(this).text(function(_, oldText){
return oldText.indexOf('More') === -1 ? 'View More' :'View Less';
})
});
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.