2

So I have this jquery that i need to make it work. But through all the parents() and children(), I can't get to where I want.

My objective is when I click in the button, the class icon-cross, toggle to icon-tick.

(In this snippet bellow, I made an example to explain better. In this case I want to change the color of the rectangle)

$(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>
grcoder
  • 324
  • 5
  • 17

3 Answers3

1

You should take p as selector, not as property:

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

If you want to get only 1st p element you can use eq method:

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

Edit:

Note that closest quoteCompare will return second div with classes medium-6 xsmall-12 small-12 column quoteCompare, so you probably also should use prev() in your code:

$(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>
antyrat
  • 27,479
  • 9
  • 75
  • 76
1

You can include the p in the children() selector:

$(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>
Al Foиce ѫ
  • 4,195
  • 12
  • 39
  • 49
  • I tried your snippet but its not working. But its another way to do it (adding the selector inside). Thank you for the suggestion. – grcoder Aug 16 '16 at 12:00
1

We need to traverse to <div class="row"> to grab the associated <p> tag. Please have a look at below snippet:

$(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>
vijayP
  • 11,432
  • 5
  • 25
  • 40