javascript - 如何使用 jQuery 更改元素中的文本？

Question

我有这段代码(只有相关部分):

<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>

我的想法是，当有人选择元素时，它是一个单选按钮，而不是“选择这个”，它应该是“得到它”。但是，我无法让它工作。我做错了什么？

Answer 1

你可以只使用 CSS 使用选中的和下一个兄弟选择器来完成

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>