jquery toggleclass another div

Question

The problem is when I click i element with ico class, I need to add class b to div, which has class a. This is what I tried.

My html code is:

 <div class="container">
    <div class="block">
        <div class="a"></div>
        <div>
            <i class="ico"></i>
        </div>
    </div>
    <div class="block">
        <div class="a"></div>
        <div>
            <i class="ico"></i>
        </div>
    </div>
    <div class="block">
        <div class="a"></div>
        <div>
            <i class="ico"></i>
        </div>
    </div>
</div>

JQuery:

jQuery(function($) {
  $('.ico').click(function() {
    $('.a').toggleClass('b');
  })

});

Ararat Harutyunyan · Accepted Answer · 2015-10-15 08:37:57Z

2

maybe you want this.

$('.ico').click(function(){
    $(this).closest('.block').find('.a').toggleClass('b');
});

answered Oct 15, 2015 at 8:37

Ararat Harutyunyan

9362 gold badges8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anand G · Accepted Answer · 2015-10-15 08:42:04Z

I think the event is not properly binded with ico

Try Below

$(document).ready(function () {
    $('.ico').on('click',function(){
        $('.a').toggleClass('b');
    });

});

.a {
    color:red;
}
.b {
   color : green; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
    <div class="block">
        <div class="a">TEestete</div>
        <div>
            <i class="ico">Click</i>
        </div>
    </div>
    <div class="block">
        <div class="a">asdasdas</div>
        <div>
            <i class="ico">Click</i>
        </div>
    </div>
    <div class="block">
        <div class="a">sadasd</div>
        <div>
            <i class="ico">Click</i>
        </div>
    </div>
</div>

Fiddle Here http://jsfiddle.net/vLLtqxw2/1/

Susheel Singh · Accepted Answer · 2015-10-15 08:43:25Z

0

your question is not clear, but this is what I understood.

fiddle: https://jsfiddle.net/jn7z7k2k/2/

jQuery(function($) {
  $('.ico').click(function() {
   	$(this).parent().prev().toggleClass('b');
  });
});

.ico{
    background:red;
    display:block;
    margin:10px;
}
.block{
    background:green;
    margin:10px;
    padding:5px;
}
.a.b{
    background:blue;
}

.a {
    display:block;
    background:pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="block">
        <div class="a">anchor</div>
        <div>
            <i class="ico">ico</i>
        </div>
    </div>
    <div class="block">
        <div class="a">anchor</div>
        <div>
            <i class="ico">ico</i>
        </div>
    </div>
    <div class="block">
        <div class="a">anchor</div>
        <div>
            <i class="ico">ico</i>
        </div>
    </div>
</div>

edited Oct 15, 2015 at 8:43

answered Oct 15, 2015 at 8:33

Susheel Singh

3,8546 gold badges34 silver badges69 bronze badges

1 Comment

Susheel Singh Over a year ago

then to what do you want to add ? be a bit specific

Collectives™ on Stack Overflow

jquery toggleclass another div

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related