Question

这是我想要做的......首先，如果你单击“全部”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>

Answer 1

您需要使用$(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');
});

Answer 2

我写了这个（使用 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 库的一部分。

如果元素有类，做一些事情

2 个答案:

修改