How can I change the text in element with jQuery?

Question

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 1

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> 

Answer 2

Your code and your HTML don't seem to match into one example, but in any case you can do something like:

$('input').click(function () {
  $(this).parent().find('p').text('...');
}