在最近的父项中切换 class

Question

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

我的 objective 是当我点击按钮时，class 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 将 return 第二个 div 和类 medium-6 xsmall-12 small-12 column quoteCompare，因此您可能还应该在您的代码：

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

Answer 2

您可以在 children() 选择器中包含 p：

$(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 3

我们需要遍历到<div class="row">来抓取关联的<p>标签。请查看以下代码段：

$(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:
    if($(this).text() === "Remove")
      $(this).closest(".row").find("p.icon-cross").toggleClass("icon-tick icon-cross");
    else
      $(this).closest(".row").find("p.icon-tick").toggleClass("icon-tick icon-cross");


    e.preventDefault();
  });
})

.icon-cross {
  width: 50px;
  height: 10px;
  background-color: blue;
}
.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>

在最近的父项中切换 class

Toggle class in closest parent

html

javascript

jquery

parent-child

toggleclass