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

这是我想做的…首先，如果你点击“全部”li框，它会在所有其他框周围添加和删除一个红色边框。现在我想要它，这样如果单击了一个包含红色边框的框，那么只需切换class.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>

.box{宽度：100px；高度：100px；背景：米色；}
.box.select-all{背景：#333；颜色：白色；}
.box边框{边框：1px实心红色；}
ul li{
显示：内联；
列表样式：无；
浮动：左；
利润率：0.5px；
文本对齐：居中；
线高：100px；
}





全部

$（文档）.ready（函数（）{
var selectAll=$（'.box.selectAll'）；
变量框=$（'.box'）。非（selectAll）；
选择全部。单击（函数（）{
toggleClass（'box-border'）；
//if（box.hasClass（'box-border'））{
//console.log（'yes'）；
// }
});
$（'ul li'）。单击（函数（）{
var item=$（this.index（）；
if（item.hasClass（'box-border'））{
console.log（'yesss'）；
}
});
});

您需要使用

$（this）.hasClass（'box-border'）

根据您的代码，

项

将是一个引用元素索引的整数

var item = $(this).index();

修改代码：

编辑 如果你想用

我写这篇文章（使用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>

const spage=document.getElementById（“mContent”）；
$（“#setsBtn”）。单击（函数（）{
if（$（this）.hasClass（'mPage'））{
spage.innerHTML=''；
spage.innerHTML='
dest
dest
dest'；
this.innerHTML=“”
这个.classList.remove（'mPage'）；
} 
否则{
spage.innerHTML=''；
spage.innerHTML='









；
这个.classList.add（'mPage'）；
this.innerHTML=''；
}
});

---

“w3”类是w3schools.com上提供的w3 css库的一部分。

Cool。但是，现在我替换了console.log。。。使用$（this.toggleClass（'box-border'）；它现在只删除红色边框，但不将其添加回。$（'ul li'）。单击（函数（）{if（$（this.hasClass（'box-border'））{$（this.toggleClass（'box-border'）；}）@user2421594，如果您想切换，只需使用

$（this.toggleClass（'box-border'）您不需要进行类检查
toggleClass
will do itjquery.com始终是一个有用的资源，他们的API和文档实际上相当不错。在stackoverflow上过帐之前，请尝试检查一下。
$('ul li').click(function(){
  var item = $(this).index();
  $(this).toggleClass('box-border');
});

<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>