父 div 的 toggleClass 不随 onClick 改变

Question

我正在尝试使用 onClick 和 toggleClass 将 display:none 更改为 display:block 在包含包含特定文本的子元素的父元素上。

即，当父 div（或多个 div）record 包含两个字母的状态缩写时，我想在li.address span.state 中显示 AK。

但是，它不起作用。小提琴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>

Answer 1

这是一种非常奇怪的方法，为什么不使用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>