![](/img/trans.png)
[英]How can I use getElementsByClassName with jQuery selector :not() selector
[英]Jquery selector - how can I ensure this works?
我有一些按钮,分别标记为 logo1 - logo15。
还有一个名为“lets-go”的按钮会根据这些按钮的选择触发 function - 当您单击徽标时,class 会“活动”。
当没有选择徽标时,我希望此按钮不在 DOM 中 - 并被隐藏。 目前,按钮的“活动” class 将其不透明度设为 1。
我现在有这个 jquery 声明。
if (!$('.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10, .logo11, .logo12, .logo13, .logo14, .logo15').hasClass("active")) {
$('#lets-go').removeClass('active')};
但它不起作用。
这是我的 logoX 按钮之一的示例:
$('.logo15').on('click', function(e) {
$('.logo15').toggleClass("active");
$('#b15').toggleClass('alive');
$('#b15').toggleClass('zoomTarget');
$('#b15').toggleClass('dead');
$('#lets-go').addClass('active');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
单击时,他们将“活动”的 class 应用于 go。 但它永远不会删除它。 只要您单击 15 个按钮中的任何一个,就会出现一个新按钮,但如果您取消选择该按钮,它仍然存在 - 然后下一个屏幕是空白的。
你能明白为什么不是吗?
我基本上在寻找:如果这些类都没有活动的 class,那么请确保这个 id 也没有活动的 class。
考虑以下:
if (!$("[class*='logo']").hasClass("active")) {
$('#lets-go').removeClass('active')};
}
这会查看以"logo"
开头的项目的 Class 属性,因此.logo3
将是这些元素之一。 但你可能想测试每一个。
$("[class*='logo']").each(function(i, el){
if(!$(el).hasClass("active")){
$('#lets-go').removeClass('active')};
}
});
看更多:
您还可以使用简化的类来帮助分组选择器。 考虑以下。
$(function() { $(".logo").click(function() { $(".logo.active").removeClass("active"); $(this).addClass("active"); $("#letsgo").prop("disabled", false); }); $("#letsgo").prop("disabled", true); })
.logo { padding: .4em; border: 1px solid black; border-radius: 3px; margin: 3px; background: #eee; color: #999; }.active { background: white; color: black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Make a Selection</p> <div class="logo item-1">Logo 1</div> <div class="logo item-2">Logo 2</div> <div class="logo item-3">Logo 3</div> <div class="logo item-4">Logo 4</div> <div class="logo item-5">Logo 5</div> <button id="letsgo">Let's Go!</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.