function to remove class of a selected item using jquery -
look code , see if guys can me with.
html
<div class="images_list"> <ul> <li class="border" title="content_1"><img src="http://localhost/freedownload/admin/upload/923411_481490901920862_1216973581_n.jpg" width="150" /><span></span></li> <li class="border" title="content_2"><img src="http://localhost/freedownload/admin/upload/923411_481490901920862_1216973581_n.jpg" width="150" /><span></span></li> </ul> </div>
css
.images_list li { list-style: none; float: left; width: 150px; height: 150px; margin-right: 10px; } .images_list li span { display: none; position: absolute; top: -10px; left: 128px; width: 32px; height: 32px; background: url(../upload/check.png); } .images_list li span:hover { background: url(../upload/uncheck.png); } .images_list li.border { border: 6px solid #d8d8d8; } .images_list li.selected { border: 6px solid #4f8fdf; position: relative; } .images_list li.selected span { display: block; } .img_info { margin-top: 170px; } .hidden { display: none; }
javascript
$('.images_list li').click(function() { $('.images_list .selected').removeclass('selected'); $(this).addclass('selected'); var clicked = $(this).attr('title'); $("#"+clicked).removeclass("hidden").siblings().addclass("hidden"); });
when checkmark hovered icon changes minus icon remove selected state. tried know no success.
here's demo
when click on span, here click bubble parent , select element again. try:
$('.images_list li span').click(function(e) { e.stoppropagation(); $(this).parent("li").removeclass('selected'); alert("remove class .selected"); });
Comments
Post a Comment