javascript - 在最近的 parent 中切换类(class)

Question

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

我的目标是当我点击按钮时，类 icon-cross，切换到 icon-tick。

(在下面的这个片段中，我做了一个例子来更好地解释。在这种情况下，我想改变矩形的颜色)

$(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-12 small-12 column 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>