如果元素具有类，则执行某些操作

Question

这里是我想要的do...First，如果您单击" all“li框，它会添加并移除其他所有框周围的红色边框。现在，我希望这样，如果单击了一个包含红色边框的框，那么只需切换. box边框。

<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库的一部分。