jQuery 横断。它选择另一个 div

Question

我有一个 div.container div.button 按钮和 div.hidden

当我点击按钮时，我可以突出显示 div.container，但我也想切换 div.hidden。

但是，我切换了下一个 div.hidden，而不是那个本身，哈哈

$(function () {
    var $radioButtons = $('input[type="radio"]');
    $radioButtons.click(function () {
        $radioButtons.each(function () {
            $(this).parents().eq(3).toggleClass("checked", this.checked);
            $(this).parents().eq(3).children("div.tobehidden").toggleClass("hidden", this.checked);
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="option2">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-1">
                <div class="radio">
                    <input id="radio-2" name="radio" type="radio" />
                    <label for="radio-2" class="radio-label"></label>
                </div>
            </div>
            <div class="col-md-4">
                <h3>Bamboo Stand</h3>
            </div>
            <div class="col-md-4">Pledge $25 or more</div>
            <div class="col-md-3"><span>101</span> left</div>
        </div>
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-11">
                <p>
                    You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list.
                </p>
            </div>
        </div>
        <div class="tobehidden hidden">
            <div class="row align-items-center p-4 top-border">
                <div class="col-md-8">Enter your pledge</div>
                <div class="col-md-2"><button class="white">$25</button></div>
                <div class="col-md-2"><button>Continue</button></div>
            </div>
        </div>
    </div>
</label>

<label for="option3">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-1">
                <div class="radio">
                    <input id="radio-3" name="radio" type="radio" />
                    <label for="radio-3" class="radio-label"> </label>
                </div>
            </div>
            <div class="col-md-4">
                <h3>Black Edition Stand</h3>
            </div>
            <div class="col-md-4">Pledge $75 or more</div>
            <div class="col-md-3"><span>64</span> left</div>
        </div>
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-11">
                <p>
                    You get a Black Special Edition computer stand and a personal thank you. You’ll be added to
                </p>
            </div>
        </div>

        <div class="tobehidden hidden">
            <div class="row align-items-center p-4 top-border">
                <div class="col-md-8">Enter your pledge</div>
                <div class="col-md-2"><button class="white">$75</button></div>
                <div class="col-md-2"><button>Continue</button></div>
            </div>
        </div>
    </div>
</label>

我想要的是单击该按钮并切换该隐藏 div 的隐藏类

Answer 1

1st：你需要看看Is <div> inside <label> block correct?

第二个：我把<label for="">...</label>改成了<div class="label">...</div>

第三：注意：使用closest,parents,find时，请注意任何html标签都应该有一个关闭标签<></>

$(function() {
  var $radioButtons = $('input[type="radio"]');

  $radioButtons.on('change' ,function() {
    const this_container = $(this).closest('.label').find('.container');
    const this_tobehidden = $(this).closest('.label').find("div.tobehidden");
  $('.container').not(this_container).removeClass('checked');
  this_container.addClass('checked');
  $("div.tobehidden").not(this_tobehidden).addClass('hidden');
    this_tobehidden.removeClass('hidden');
  });
});

.container.checked{
  background : #666;
}
.tobehidden.hidden{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="label">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-1">
        <div class="radio">
          <input id="radio-2" name="radio" type="radio" />
          <label for="radio-2" class="radio-label"></label>
        </div>
      </div>
      <div class="col-md-4">
        <h3>Bamboo Stand</h3>
      </div>
      <div class="col-md-4">Pledge $25 or more</div>
      <div class="col-md-3"><span>101</span> left</div>
    </div>
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-11">
        <p>
        You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list.
        </p>
      </div>
     </div>
  </div>
  <div class="tobehidden hidden">
    <div class="row align-items-center p-4 top-border">
      <div class="col-md-8">Enter your pledge</div>
      <div class="col-md-2">
        <button class="white">$25</button>
      </div>
      <div class="col-md-2">
        <button>Continue</button>
      </div>
    </div>
  </div>
</div>
<div class="label">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-1">
        <div class="radio">
          <input id="radio-2" name="radio" type="radio" />
          <label for="radio-2" class="radio-label"></label>
        </div>
      </div>
      <div class="col-md-4">
        <h3>Bamboo Stand</h3>
      </div>
      <div class="col-md-4">Pledge $25 or more</div>
      <div class="col-md-3"><span>101</span> left</div>
    </div>
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-11">
        <p>
        You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list.
        </p>
      </div>
     </div>
  </div>
  <div class="tobehidden hidden">
    <div class="row align-items-center p-4 top-border">
      <div class="col-md-8">Enter your pledge</div>
      <div class="col-md-2">
        <button class="white">$25</button>
      </div>
      <div class="col-md-2">
        <button>Continue</button>
      </div>
    </div>
  </div>
</div>