Home how to identify which `span` has been clicked in order to change the css property of it?
Reply: 3

how to identify which `span` has been clicked in order to change the css property of it?

sanjana
1#
sanjana Published in 2018-01-13 10:28:00Z

I have a set of span tags (for color blocks) and inside each, I have another span tag (for icons). I want to change the css property of an icon from display:none to display:block as soon as one of the colors is clicked. The condition being that when one of the icons has display:block then the rest should be hidden.

JSFiddle to get a better idea of what I mean

So here is what i mean in steps:

  1. The colors' span/block should be clicked

  2. When one of them is clicked , the icon should be displayed

  3. When another one of the colors is clicked, icon should be displayed but the previous icon that was displayed should now be hidded

Steve T
2#
Steve T Reply to 2018-01-13 10:54:24Z

You should change your $(".colors").click(function(){ handler to $(document).on('click', '.colors', function(){ and do your show/hide logic in the click event:

$(document).on('click', '.colors', function(){
  //display "fa fa-check" on the clicked div and hide it on the rest
  $('.fa.fa-check').hide();
  $('.fa.fa-check', $(this)).show();
});
Saurabh
3#
Saurabh Reply to 2018-01-13 10:42:50Z

You can use simple jquery in this:

select your label tag as well as each color div with id selector

<div id="label"></div>
<div id="red"></div>

then in jquery:

<script>
    $("#red").click(function(){
   $("#label").css("background-color","red");
})

</script>
Facundo Corradini
4#
Facundo Corradini Reply to 2018-01-13 11:08:19Z

You can always go for a simpler pure CSS solution, adding radio-buttons and using labels instead of spans for your colors, then switching the visibility of the checked option.

    .fa.fa-check{
        visibility: hidden;
        color:white;
        padding-top: 8px; 
        padding-left:14px;
        font-size:15px;
    }
.colors{
        cursor:pointer;
        width:42px; 
        height:30px;
        margin-right:3px;
        border-radius:3px; 
        display:inline-block;
    }

.option{display:none;}

.option:checked + label span{
  visibility: visible;
}

http://jsfiddle.net/qsJ3c/44/

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.262221 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO