删除类而不影响具有相同类

Question

我将此作为我的jQuery

$(".part-txt").click(function() {
      $('.txt-container').toggleClass("hide");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
      <div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
      <div class="col-sm-9 height">
        <div class="row checkies">
          <div class="col-sm-4 text-center check">
            <div class="row"><i class="fa fa-check color-dblue2"></i></div>
          </div>
          <div class="col-sm-4 text-center check">
            <div class="row"><i class="fa fa-check color-dblue2"></i></div>
          </div>
          <div class="col-sm-4 text-center check">
            <div class="row"><i class="fa fa-check color-dblue2"></i></div>
          </div>
        </div>
      </div>
      <div class="row txt-container hide">
        <div class="col-sm-12 hide-txt">
          <p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
      <div class="col-sm-9 height">
        <div class="row checkies">
          <div class="col-sm-4 text-center check">
            <div class="row"><i class="fa fa-check color-dblue2"></i></div>
          </div>
          <div class="col-sm-4 text-center check">
            <div class="row"><i class="fa fa-check color-dblue2"></i></div>
         </div>
          <div class="col-sm-4 text-center check">
            <div class="row"><i class="fa fa-check color-dblue2"></i></div>
          </div>
        </div>
      </div>
      <div class="row txt-container hide">
        <div class="col-sm-12 hide-txt">
          <p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
        </div>
      </div>
    </div>

基本上我的问题是我想单击.part-txt div并显示.txt-container div而不影响具有相同类的其他div。对不起初学者。

Answer 1

您可以使用 nextAll() 选择与当前点击的txt-container相关的下一个part-txt元素，例如：

$(".part-txt").click(function() {
    $(this).nextAll('.txt-container').toggleClass("hide");
});

希望这有帮助。

$(".part-txt").click(function() {
  $(this).nextAll('.txt-container').toggleClass("hide");
});

.hide{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
  <div class="col-sm-9 height">
    <div class="row checkies">
      <div class="col-sm-4 text-center check">
        <div class="row"><i class="fa fa-check color-dblue2"></i></div>
      </div>
      <div class="col-sm-4 text-center check">
        <div class="row"><i class="fa fa-check color-dblue2"></i></div>
      </div>
      <div class="col-sm-4 text-center check">
        <div class="row"><i class="fa fa-check color-dblue2"></i></div>
      </div>
    </div>
  </div>
  <div class="row txt-container hide">
    <div class="col-sm-12 hide-txt">
      <p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-3 height part-txt"><span>Conversions from other tax programs</span></div>
  <div class="col-sm-9 height">
    <div class="row checkies">
      <div class="col-sm-4 text-center check">
        <div class="row"><i class="fa fa-check color-dblue2"></i></div>
      </div>
      <div class="col-sm-4 text-center check">
        <div class="row"><i class="fa fa-check color-dblue2"></i></div>
     </div>
      <div class="col-sm-4 text-center check">
        <div class="row"><i class="fa fa-check color-dblue2"></i></div>
      </div>
    </div>
  </div>
  <div class="row txt-container hide">
    <div class="col-sm-12 hide-txt">
      <p>Iusto doloribus phasellus venenatis egestas, cursus illo, perferendis, possimus eros ipsum eum saepe facilisis, nostrud ut accumsan temporibus perferendis dolorem tempora. Id risus quia neque tempora dictum, delectus irure auctor.</p>
    </div>
  </div>
</div>

Answer 2

通过其父级找到它

$(".part-txt").click(function() {
    $(this).parent().find('.txt-container').toggleClass("hide");
});

Answer 3

您可以使用伪选择

$(".part-txt").click(function() {
    $(".txt-container:first").toggleClass("hide");
});