jquery - if condition with css: setting a border and removing when clicked consequently -
i have , dislike objects. 1 clicked wanna display border around it, works perfectly. if clicked again, want border disappear. used if condition .css not worked. .css("border-width") returns empty when print alert function. problem? works other this.
$('a[id*="grd_wallposts_lbtn_likedislike_like"]').click(function () { if ($(this).children('#imglikedislike_like').css("border-width") == "1px") { $(this).children('#imglikedislike_like').css("border-width", "0px"); } else { $(this).children('#imglikedislike_like').css("border-width", "1px"); $(this).children('#imglikedislike_like').css("border-style", "solid"); $(this).children('#imglikedislike_like').css("border-color", "#b9b9b9"); var = $(this).attr("id"); = a.replace("grd_wallposts_lbtn_likedislike_like_", ""); $('#grd_wallposts_lbtn_likedislike_dislike_' + a).children('#imglikedislike_dislike').css("border-width", "0px"); } });
i might use class set clicked state like
<a class="grd_wallposts_lbtn_likedislike_like"> <span class="imglikedislike_like">like</span> </a> <a class="grd_wallposts_lbtn_likedislike_dislike"> <span class="imglikedislike_dislike">dislike</span> </a>
then
.clicked { border: 1px solid #b9b9b9; }
and
$('.grd_wallposts_lbtn_likedislike_like').click(function () { $(this).children('.imglikedislike_like').toggleclass('clicked'); $(this).next().children('.imglikedislike_dislike').removeclass('clicked'); }); $('.grd_wallposts_lbtn_likedislike_dislike').click(function () { $(this).children('.imglikedislike_dislike').toggleclass('clicked'); $(this).prev().children('.imglikedislike_like').removeclass('clicked'); });
demo: fiddle
Comments
Post a Comment