[英]How can I add a class to an element if an anchor inside a list item is active?
I have this structure:我有这个结构:
<div id="prev-button">
Previous
</div>
<ul class="thumbnails">
<li class="" data-skus="">
<a class="thumbnail active">
<img src=""></a>
</li>
<li class="" data-skus="">
<a class="thumbnail">
<img src=""></a>
</li>
<li class="" data-skus="">
<a class="thumbnail">
<img src=""></a>
</li>
</ul>
<div id="next-button">
Next
</div>
I need to add new-class
to id="prev-button"
when the first <li>
has active
class on its <a>
child.当第一个
<li>
在其<a>
子项上具有active
类时,我需要将new-class
添加到id="prev-button"
。
When first anchor doesn't have active
class, remove the new-class
from id="prev-button"
当第一个锚点没有
active
类时,从id="prev-button"
删除new-class
Also, when last list item has active
class added to its child anchor, same new-class
has to be added to id="next-button"
.此外,当最后一个列表项将
active
类添加到其子锚点时,必须将相同的new-class
添加到id="next-button"
。
I tried to add new-class
to the parent list item when the anchor has active
class and is not working.当锚点具有
active
类并且不工作时,我尝试将new-class
添加到父列表项。
if ($('.thumbnail').is(".active")) {
$(this).parent().addClass("active");
}
You can use .index
to know the sequential order of the selected element.您可以使用
.index
来了解所选元素的顺序。 So depending on which one is active, the following expression:因此,取决于哪个是活动的,以下表达式:
$(".thumbnail.active").parent().index()
will evaluate to 0, 1 or 2.将评估为 0、1 或 2。
Then with toggleClass()
you can choose to set the "new-class" on the first button when, and only if, that index is 0, and something similar can be done for the other button.然后使用
toggleClass()
您可以选择在第一个按钮上设置“新类”,当且仅当该索引为 0 时,并且可以对另一个按钮执行类似的操作。
Here is a demo:这是一个演示:
// The argument to this function determines how the current selection should move: // 0: don't move it; just apply the necessary CSS // 1: move it down // -1: move it up function select(dir) { let last = $(".thumbnail").length - 1; let curr = $(".thumbnail.active").parent().index() + dir; if (curr >= 0 && curr <= last) { $(".thumbnail").removeClass("active").eq(curr).addClass("active"); $("#prev-button").toggleClass("disabled", curr == 0); $("#next-button").toggleClass("disabled", curr == last); } } $("#prev-button").click(select.bind(0, -1)); $("#next-button").click(select.bind(0, 1)); select(0); // initialise also on page load
#prev-button, #next-button { padding: 5px; text-align: center; background: lightblue; display: inline-block; user-select: none; cursor: pointer; } .active { background: yellow } #prev-button.disabled, #next-button.disabled { background: silver }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="prev-button"> Previous </div> <ul class="thumbnails"> <li class="" data-skus=""> <a class="thumbnail active"> <img src="">first</a> </li> <li class="" data-skus=""> <a class="thumbnail"> <img src="">second</a> </li> <li class="" data-skus=""> <a class="thumbnail"> <img src="">third</a> </li> </ul> <div id="next-button"> Next </div>
parent().index()
:parent().index()
: The above is quite sensitive to the document structure.以上对文档结构相当敏感。 Alternatively, you can use
index
with an argument, which works much like indexOf
on arrays:或者,您可以将
index
与参数一起使用,它的工作方式与数组上的indexOf
非常相似:
// The argument to this function determines how the current selection should move: // 0: don't move it; just apply the necessary CSS // 1: move it down // -1: move it up function select(dir) { let $links = $(".thumbnail"); let $active = $links.filter(".active"); let curr = $links.index($active) + dir; let last = $links.length - 1; if (curr >= 0 && curr <= last) { $(".thumbnail").removeClass("active").eq(curr).addClass("active"); $("#prev-button").toggleClass("disabled", curr == 0); $("#next-button").toggleClass("disabled", curr == last); } } $("#prev-button").click(select.bind(0, -1)); $("#next-button").click(select.bind(0, 1)); select(0); // initialise also on page load
#prev-button, #next-button { padding: 5px; text-align: center; background: lightblue; display: inline-block; user-select: none; cursor: pointer; } .active { background: yellow } #prev-button.disabled, #next-button.disabled { background: silver }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="prev-button"> Previous </div> <ul class="thumbnails"> <li class="" data-skus=""> <a class="thumbnail active"> <img src="">first</a> </li> <li class="" data-skus=""> <a class="thumbnail"> <img src="">second</a> </li> <li class="" data-skus=""> <a class="thumbnail"> <img src="">third</a> </li> </ul> <div id="next-button"> Next </div>
Why are you trying to access the id="prev-button"
with $(this).parent().addClass("active");
你为什么要尝试使用
$(this).parent().addClass("active");
访问id="prev-button"
$(this).parent().addClass("active");
? ? The parent would be the
li
element.父元素将是
li
元素。 Why not use $("#prev-button")
to access the prev-button?为什么不使用
$("#prev-button")
访问 prev-button?
You can create a playground at Codepen.io to experiment, for example.例如,您可以在 Codepen.io 上创建一个游乐场来进行实验。 I have created one this which is the first fix for what you asked: https://codepen.io/peter-krebs/pen/xxdxoPZ
我已经创建了一个这是你问的第一个修复: https : //codepen.io/peter-krebs/pen/xxdxoPZ
https://api.jquery.com/ has tons of resources for you to read with example code. https://api.jquery.com/有大量资源供您阅读示例代码。 Don't be afraid to educate yourself, don't just guess how it works.
不要害怕教育自己,不要只是猜测它是如何工作的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.