这是我想要做的......首先,如果你单击“全部”li框,它会添加并删除所有其他框周围的红色边框。现在我想要它,以便如果单击包含红色边框的框,则只需切换类.box-border。
<style>
.box { width: 100px; height: 100px; background: beige; }
.box.select-all { background: #333; color: white; }
.box-border { border: 1px solid red; }
ul li {
display: inline;
list-style: none;
float: left;
margin: 0 5px;
text-align: center;
line-height: 100px;
}
</style>
<div class="row">
<div class="large-10 push-2 medium-10 columns">
<ul>
<li class="box box1"></li>
<li class="box box2"></li>
<li class="box box3"></li>
<li class="box box4"></li>
<li class="box box5 select-all">All</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
var selectAll = $('.box.select-all');
var boxes = $('.box').not(selectAll);
selectAll.click(function(){
boxes.toggleClass('box-border');
// if (boxes.hasClass('box-border')) {
// console.log('yes');
// }
});
$('ul li').click(function(){
var item = $(this).index();
if (item.hasClass('box-border')) {
console.log('yessssss');
}
});
});
</script>
答案 0 :(得分:2)
您需要使用$(this).hasClass('box-border')
根据您的代码,item
将是一个引用元素索引的整数。
var item = $(this).index();
修改后的代码:
$('ul li').click(function(){
var item = $(this).index();
if ($(this).hasClass('box-border')) {
console.log('yessssss');
}
});
如果您想使用toggleClass()
$('ul li').click(function(){
var item = $(this).index();
$(this).toggleClass('box-border');
});
答案 1 :(得分:0)
我写了这个(使用 jQuery)以在单击带有类的按钮时在两个页面之间切换(如果该类存在,则删除该类,如果不存在则添加该类以使用相同的按钮(具有相同 ID 的元素)再次),
方法调用的顺序和“innerHTML”属性设置在函数中很重要(您必须在更改按钮(或其他事件“触发”元素)之前更改页面(或其他更改的元素) ),以及将“mPage”类(触发类)添加到按钮的顺序无关紧要。
<script id="toSettings">
const spage = document.getElementById("mContent");
$( "#setsBtn" ).click(function(){
if ($(this).hasClass('mPage')) {
spage.innerHTML = '';
spage.innerHTML = '<br /><div style="width=100%; height=100%; top=0; left=0; background-color: pink;"> <button class="w3-btn w3-amber" onclick="goso()">dest</button><br /> <button class="w3-btn w3-amber">dest</button><br /><button class="w3-btn w3-amber">dest</button> </div>';
this.innerHTML = '<img src="img/leftarrow.svg"/>'
this.classList.remove('mPage');
}
else {
spage.innerHTML='';
spage.innerHTML = '<div style="width: 100%; height: 100%; " id="mContent" class="mContent w3-center"><br /><br /><br /><br /><br /><br /><br /><div id="" class=""><div class="mPageBtn w3-button w3-green" id="ledgerbtn" style="display: block;">Ledger</div><br /></div>';
this.classList.add('mPage');
this.innerHTML = '<img src="img/gear.svg"/>';
}
});
</script>
'w3' 类是 w3schools.com 上提供的 w3-css 库的一部分。