Rick Alvarez Rick Alvarez - 1 year ago 44
Javascript Question

How can I change the text in element with jQuery?

I have this code (only the pertinent part):



<script>
$(function() {
$('ul li').click(function() {
$(this).addClass('picked').siblings().removeClass('picked');
});
});
$('picked').click(function() {
var $this = $(this);
$this.toggleClass('picked');
if ($this.hasClass('picked > rightPill-right')) {
this.textContent = this.textContent.replace('Pick This One!', 'Got It!')
};
});
</script>

<div class="timePill ">
<div class="timePill-left ">
<p>4:30 PM - 6:30 PM</p>
</div>
<div class="timePill-right">
<input type="radio" autocomplete="off" value="430">
<p>Pick This One!</p>
</div>
</div>





My idea is that when someone selects the element, which is a radio button, instead of "Pick this one" it should read "Got It". However, I can't make it work. What am I doing wrong?

Answer Source

You can do it with just CSS using checked and next sibling selector

input[type="radio"] + label + label { display: none }
input[type="radio"]:checked + label { display: none }
input[type="radio"]:checked + label + label { display: inline }
<div class="timePill ">
  <div class="timePill-left ">
    <p>4:30 PM - 6:30 PM</p>
  </div>
  <div class="timePill-right">
    <input type="radio" autocomplete="off" value="430" id="r1" name="foo">
    <label for="r1">Pick This One!</label>
    <label for="r1">Got It!</label>
  </div>
</div>

<div class="timePill ">
  <div class="timePill-left ">
    <p>4:30 PM - 6:30 PM</p>
  </div>
  <div class="timePill-right">
    <input type="radio" autocomplete="off" value="430" id="r2" name="foo">
    <label for="r2">Pick This One!</label>
    <label for="r2">Got It!</label>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download