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

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