父div的toggleClass不隨onClick改變

我正在嘗試使用 onClick 和 toggleClass 將 display:none 更改為 display:block 在包含包含特定文本的子元素的父元素上。

即，當父 div（或多個 div）record包含兩個字母的狀態縮寫 AK 時，我想顯示它li.address span.state。

但是，它不起作用。小提琴https://jsfiddle.net/ky23ne1w/9/

$(".state-button-ak").on("click", function(e) {
  if ($(".record li.address span.state:contains(AK)")) {
    $(".record li.address span.state:contains(AK)").parent().toggleClass("display-block");
    e.preventDefault();
  }
});

.record {
  display: none;
}

.state-button {
  border: 2px solid #c2c2c2;
  padding: 5px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
}

.display-none {
  display: none;
}

.display-block {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak">Alaska</button>
<button class="state-button state-button-al">Alabama</button>
<button class="state-button state-button-ca">California</button>

<div class="record">
  <h1 class="name">Customer 1</h1>
  <ul>
    <li class="focus">Focus: </li>
    <li class="course">Course: </li>
    <li class="business">Business: </li>
    <li class="address">Location: Anchorage, <span class="state">AK</span>
    </li>
  </ul>
</div>

<div class="record">
  <h1 class="name">Customer 2</h1>
  <ul>
    <li class="focus">Focus: </li>
    <li class="course">Course: </li>
    <li class="business">Business: </li>
    <li class="address">Location: Mobile, <span class="state">AL</span>
    </li>
  </ul>
</div>

<div class="record">
  <h1 class="name">Customer 3</h1>
  <ul>
    <li class="focus">Focus: </li>
    <li class="course">Course: </li>
    <li class="business">Business: </li>
    <li class="address">Location: Los Angeles <span class="state">CA</span>
    </li>
  </ul>
</div>

uj5u.com熱心網友回復：

這是一種非常奇怪的方法，為什么不使用data-attributes特定的類來定位元素。

您的情況下的父li級是地址類，而不是div與記錄類。

$('.state-button').on('click', function(){
    
  let _this = $(this);
  
  if(!_this.hasClass('active')){
    $('.display-block ').removeClass('display-block ');
        
    $('.state-button.active').removeClass('active');
    _this.addClass('active');
    
    let state = _this.text().substring(0,2).toUpperCase();
    
    if(state === 'AL')
        state = 'AK';
    
    $('span.state:contains(' state ')').closest('.record').addClass('display-block');
    
  }
  
});

.record {
    display: none;
}

.state-button {
    border: 2px solid #c2c2c2;
    padding: 5px;
    border-radius: 5px;
    margin: 0 10px 0 10px;
}

.state-button.active {
    border-color: red;
}

.display-none {
    display: none;
}

.display-block {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak">Alaska</button>
<button class="state-button state-button-ar">Arkansas</button>
<button class="state-button state-button-ca">California</button>
<div class="record">
    <h1 class="name">Customer 1</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
    </ul>
</div>
<div class="record">
    <h1 class="name">Customer 2</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Mobile, <span class="state">AR</span></li>
    </ul>
</div>
<div class="record">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Los Angeles <span class="state">CA</span></li>
    </ul>
</div>

這是一個使用示例data-attributes：

$('.state-button').on('click', function(){
    
  let _this = $(this);

  if(!_this.hasClass('active')){
  
    $('.state-button.active, .record.active').removeClass('active');
    $('[data-state=' _this.data('state') ']').addClass('active');
    
  }
  
});

.record {
    display: none;
}

.state-button {
    border: 2px solid #c2c2c2;
    padding: 5px;
    border-radius: 5px;
    margin: 0 10px 0 10px;
}

.state-button.active {
    border-color: red;
}

.record.active {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak" data-state="AK">Alaska</button>
<button class="state-button state-button-ar" data-state="AR">Arkansas</button>
<button class="state-button state-button-ca" data-state="CA">California</button>
<div class="record" data-state="AK">
    <h1 class="name">Customer 1</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
    </ul>
</div>
<div class="record" data-state="AR">
    <h1 class="name">Customer 2</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Mobile, <span class="state">AR</span></li>
    </ul>
</div>
<div class="record" data-state="CA">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Los Angeles <span class="state">CA</span></li>
    </ul>
</div>

標籤：javascript html 查询

上一篇：滑鼠按下事件停止單擊事件功能的問題

下一篇：jQuery$(window).on("load",function()僅在重繪后啟動