Reputation: 537
I don't know the correct terminology to us to describe this issue. I'm trying to append the name of the state (Alaska, Alabama, etc) from the <span class="state-name">
when it has the active class to <button class="close-state">
, and it somewhat works. But, right now, the each state name is added and doesn't replace the first state. How can I "clear" the appended text and re-append the current button.active
class?
$('.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');
var statename = $('button.active span.state-name').text();
$(".close-state").append(statename);
$(".close-state").show();
}
});
.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;
}
.close-state {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
<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"><span class="state-name">Alaska</span></button>
<button class="state-button state-button-ar" data-state="AR"><span class="state-name">Arkansas</span></button>
<button class="state-button state-button-ca" data-state="CA"><span class="state-name">California</span></button>
<div class="record" data-state="AK">
<h1 class="name">Customer 1</h1>
<ul>
<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="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="address">Location: Los Angeles <span class="state">CA</span></li>
</ul>
</div>
<div>
<button class="close-state">Close </button>
</div>
Upvotes: 1
Views: 34
Reputation: 337743
The quick way to do this would be to put a new element in the button
, eg. a span
, and simply overwrite the text()
of that each time a button is clicked.
Also note the example has a couple of tweaks to the jQuery to make it a little more succinct:
$('.state-button:not(.active)').on('click', function() {
let $this = $(this);
$('.state-button.active, .record.active').removeClass('active');
$(`[data-state="${$this.data('state')}"]`).addClass('active');
$('.close-state').show().find('span').text($this.text());
});
.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;
}
.close-state {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
display: none;
}
<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"><span class="state-name">Alaska</span></button>
<button class="state-button state-button-ar" data-state="AR"><span class="state-name">Arkansas</span></button>
<button class="state-button state-button-ca" data-state="CA"><span class="state-name">California</span></button>
<div class="record" data-state="AK">
<h1 class="name">Customer 1</h1>
<ul>
<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="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="address">Location: Los Angeles <span class="state">CA</span></li>
</ul>
</div>
<div>
<button class="close-state">Close <span></span></button>
</div>
Upvotes: 1