CODEWITHSUNDEEP
javascriptjqueryreplace
Rick Alvarez
Rick Alvarez

Reputation: 191

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?

Upvotes: 1

Views: 48

Answers (2)

ControlAltDel
ControlAltDel

Reputation: 35106

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('...');
}

Upvotes: 0

epascarello
epascarello

Reputation: 207557

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>

Upvotes: 2

Related Questions