父 div 的 toggleClass 不随 onClick 改变

Posted 2023-05-08

【中文标题】父 div 的 toggleClass 不随 onClick 改变

【英文标题】：toggleClass of parent div not changing with onClick

【发布时间】：2022-01-19 21:57:28

【问题描述】：

我正在尝试使用 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>

【参考方案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>

【讨论】：

谢谢！我的下一个问题是如何为所有 50 个州实现这一点，但使用数据属性可以解决这个问题。我可以将数据属性添加到标记中。