CODEWITHSUNDEEP
jquery
1001001
1001001

Reputation: 47

How to colored all div except this

I would like to colored all divs except that one I click on. In my code it works, but only one time. If I click to another div, it doesnt work.

http://jsfiddle.net/6VhK8/353/

<div class="fp">
    <div id="1">id="1"</div>
    <div id="2">id="2"</div>
    <div id="3">id="3"</div>
    <div id="4">id="4"</div>
    <div id="5">id="5"</div>
    <div id="6">id="6"</div>
    <div id="7">id="7"</div>
</div>

$(function() {
    $('div').click(function() {  
        var r = this.id;
        $('.fp div').not('#'+r).css({'color':'blue'});
    });
});

Upvotes: 2

Views: 167

Answers (6)

mkkhedawat
mkkhedawat

Reputation: 1717

Once a tag is blue, how will it change back to black ?

You are supposed to change color back to black before or after clicking for second time.

Upvotes: -1

Rajendra Gupta
Rajendra Gupta

Reputation: 379

try adding this line.

$('#'+r).css({'color':'white'});

Upvotes: 0

user2575725
user2575725

Reputation:

Try using css class instead:

$(function() {
  var divs = $('div.fp').find('div');
  divs.on('click', function() {
    divs.removeClass('blue');//remove previous selection
    $(this).addClass('blue');//the current clicked div
  });
});
.blue {
  background: skyblue;
}
div.fp div {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fp">
  <div id="1">id="1"</div>
  <div id="2">id="2"</div>
  <div id="3">id="3"</div>
  <div id="4">id="4"</div>
  <div id="5">id="5"</div>
  <div id="6">id="6"</div>
  <div id="7">id="7"</div>
</div>

Upvotes: 1

kosmos
kosmos

Reputation: 4288

The easiest way. Check your updated fiddle:

$(function() {
    $('.fp div').on('click', function() {
        $(this).css('color', 'black');
        $('.fp div').not(this).css({'color':'blue'});
    });
});

Upvotes: 0

Robin
Robin

Reputation: 864

check this fiddle hope this is what you are looking for;

$(function() {
    $('.fp div').click(function() {          
        $('.fp div').css({'color' : 'blue'});
        $(this).css({'color' : 'black'});     

    });
});


<div class="fp">
    <div id="1">id="1"</div>
    <div id="2">id="2"</div>
    <div id="3">id="3"</div>
    <div id="4">id="4"</div>
    <div id="5">id="5"</div>
    <div id="6">id="6"</div>
    <div id="7">id="7"</div>
</div>

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

You can use a class

.highlight{
    color:blue;
}

then

$(function () {
    $('.fp  div').click(function () {
        $(this).removeClass('highlight').siblings().addClass('highlight')
    });
});

Upvotes: 0

Related Questions