toggleClass of parent div not changing with onClick-CodePudding

I'm trying to use onClick and toggleClass to change display:none to display:block on the parent elements which contain a child element that contains a certain text.

I.e., I want to show the parent div (or multiple divs) record when it contains the two letter state abbreviation, AK in li.address span.state.

But, it's not working. Fiddle 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 >Alaska</button>
<button >Alabama</button>
<button >California</button>

<div >
  <h1 >Customer 1</h1>
  <ul>
    <li >Focus: </li>
    <li >Course: </li>
    <li >Business: </li>
    <li >Location: Anchorage, <span >AK</span>
    </li>
  </ul>
</div>

<div >
  <h1 >Customer 2</h1>
  <ul>
    <li >Focus: </li>
    <li >Course: </li>
    <li >Business: </li>
    <li >Location: Mobile, <span >AL</span>
    </li>
  </ul>
</div>

<div >
  <h1 >Customer 3</h1>
  <ul>
    <li >Focus: </li>
    <li >Course: </li>
    <li >Business: </li>
    <li >Location: Los Angeles <span >CA</span>
    </li>
  </ul>
</div>

CodePudding user response：

It is a really strange approach, why not work with data-attributes or specific classes to target the elements.

The parent in your case is li with address class, not the div with record class.

$('.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 >Alaska</button>
<button >Arkansas</button>
<button >California</button>
<div >
    <h1 >Customer 1</h1>
    <ul>
        <li >Focus: </li>
        <li >Course: </li>
        <li >Business: </li>
        <li >Location: 345 Cow Town, Anchorage, <span >AK</span></li>
    </ul>
</div>
<div >
    <h1 >Customer 2</h1>
    <ul>
        <li >Focus: </li>
        <li >Course: </li>
        <li >Business: </li>
        <li >Location: Mobile, <span >AR</span></li>
    </ul>
</div>
<div >
    <h1 >Customer 3</h1>
    <ul>
        <li >Focus: </li>
        <li >Course: </li>
        <li >Business: </li>
        <li >Location: Los Angeles <span >CA</span></li>
    </ul>
</div>

This is an example using 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  data-state="AK">Alaska</button>
<button  data-state="AR">Arkansas</button>
<button  data-state="CA">California</button>
<div  data-state="AK">
    <h1 >Customer 1</h1>
    <ul>
        <li >Focus: </li>
        <li >Course: </li>
        <li >Business: </li>
        <li >Location: 345 Cow Town, Anchorage, <span >AK</span></li>
    </ul>
</div>
<div  data-state="AR">
    <h1 >Customer 2</h1>
    <ul>
        <li >Focus: </li>
        <li >Course: </li>
        <li >Business: </li>
        <li >Location: Mobile, <span >AR</span></li>
    </ul>
</div>
<div  data-state="CA">
    <h1 >Customer 3</h1>
    <ul>
        <li >Focus: </li>
        <li >Course: </li>
        <li >Business: </li>
        <li >Location: Los Angeles <span >CA</span></li>
    </ul>
</div>