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

# 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: The colors' span/block should be clicked When one of them is clicked , the icon should be displayed 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#
 You can use simple jquery in this: select your label tag as well as each color div with id selector 
 then in jquery:  
 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/