javascript - 在最近的父级中切换类

Question

所以我有这个jquery，我需要让它工作。但通过所有的parents()和children()，我无法到达我想要的地方。

我的目标是当我单击按钮时，类图标交叉，切换到图标勾选。

(在下面的代码片段中，我做了一个例子来更好地解释。在本例中我想更改矩形的颜色)

$(function() {
  $(".addOpt").click(function(e) {
    $(this).text(function(i, text) {
      return text === "Add" ? "Remove" : "Add";
    });
    $(this).toggleClass("btn-primary btn-remove");
    
    
    //the problem is the following line:
    $(this).closest(".quoteCompare").children(".quoteCompareInside").p.toggleClass("icon-tick icon-cross");
    
    
    e.preventDefault();
  });
})

.icon-cross {
  width: 50px;
  height: 10px;
  background-color: green;
}
.icon-tick {
  width: 50px;
  height: 10px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
  <div class="medium-6 xsmall-12 small-12 column quoteCompare  ">
    <div class="quoteCompareInside quoteStandard sameHeight2">
      <p class="icon-cross"></p>
      <p class="title noMarginBottom">10€</p>
    </div>
  </div>
  <div class="medium-6 xsmall-12 small-12 column quoteCompare  ">
    <div class="quoteCompareInside quoteStandard sameHeight2">
      <div class="form-row valign">
        <button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
      </div>
    </div>
  </div>
</div>

Answer 1

您应该将 p 作为选择器，而不是属性:

$(this).closest(".quoteCompare").children(".quoteCompareInside").find('p').toggleClass("icon-tick icon-cross");

如果您只想获取第一个 p 元素，您可以使用 eq方法:

$(this).closest(".quoteCompare").children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");

编辑:

请注意，最接近的 quoteCompare 将返回带有类 medium-6 xsmall-12small-12 列 quoteCompare 的第二个 div，因此您可能还应该使用 prev()在您的代码中:

$(this).closest(".quoteCompare").prev().children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");

$(function() {
  $(".addOpt").click(function(e) {
    $(this).text(function(i, text) {
      return text === "Add" ? "Remove" : "Add";
    });
    $(this).toggleClass("btn-primary btn-remove");
    
    
    //the problem is the following line:
    $(this).closest(".quoteCompare").prev().children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");
    
    e.preventDefault();
  });
})

.icon-cross {
  width: 50px;
  height: 10px;
  background-color: green;
}
.icon-tick {
  width: 50px;
  height: 10px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
  <div class="medium-6 xsmall-12 small-12 column quoteCompare  ">
    <div class="quoteCompareInside quoteStandard sameHeight2">
      <p class="icon-cross"></p>
      <p class="title noMarginBottom">10€</p>
    </div>
  </div>
  <div class="medium-6 xsmall-12 small-12 column quoteCompare  ">
    <div class="quoteCompareInside quoteStandard sameHeight2">
      <div class="form-row valign">
        <button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
      </div>
    </div>
  </div>
</div>