i allways found an answer here just be reading the threads but now its time for my very first thread because i was unable to find related questions: this is my target code:
<li>
<span class="panel">
<a href="…" class="image" rel="group">
<img title="…" src="…" alt="…" width="128" height="96" />
</a>
<span class="sizes">
<span class="button">
<a href="#" class="size1" rel="…" title="1">9x13</a>
</span>
<span class="button">
<a href="#" class="size2" rel="…" title="3">10x15</a>
</span>
<span class="button">
<a href="#" class="size3" rel="…" title="6">20x30</a>
</span>
</span>
</span>
<a href="…" class="image" rel="group">
<span class="added"></span>
<img title="…" src="…" alt="…" width="128" height="96" class="thumbnail" />
</a>
</li>
i add two "span" elements through jquery:
$('.sizes a').click(
function (e) {
e.preventDefault();
$(this).after("<span class='checked'></span><span class='remove'></span>");
}
);
the maximum amount of those s are 3 times in a wrapped div. so i am trying to do is the following:
$(".remove").live('click', function(){
$(this).hide();
$(this).prev().hide(); // hide checked span
if ($(this).parent().parent().children().children().each().hasClass('checked'))
{
$(this).parent().parent().parent().next().children(".added").hide();
}
}
);
of course my if statement is crap. i try it in my own words: if there are more than one span(class=remove) in span(class=panel) then nothing should happen. but if there is just one span(class=remove) left in span(class=panel) THEN should be hidden
how do i achieve this? there is an online demonstration of this: http://bit.ly/972be4 as 开发者_如何学Cyou can see, every time when i hit a button below an image, the image gets marked by a label. and i want to hide this label (class=added) when no button is selected
Thank you very much! best wishes from germany
Check for
$("span.panel").find("span.remove").length
or just
$("span.panel span.remove").length
You can rewrite the last bit to the following:
$('.remove').live('click'), function() {
if($(this).parents('.panel').find('.remove').length > 1)
return;
// there's only 1 - add the rest of the functionality here
}
Though .parents() and .find() are expensive, but if you don't have a lot of these elements, the overhead is negligible.
Also, if the 'remove' elements are always siblings, change the the second line to:
if($(this).siblings('.remove').length)
The above answers are correct. But as i saw you are not removing those 'span.remove' from DOM so it will count on all the cases once they are added. So you have to check their visibility too.
if($(this).parent().parent().children().find('.remove:visible').length == 0){
$(this).parent().parent().parent().next().children(".added").hide();
}
will be your condition. This will hide that yellow bar, when last '.remove' is clicked-hidden.
As you just asked how to hide that bar, this just does that. There can be other things you have to consider, which may be flawed, like "re-showing the .added bar in case one is selected again", logic also seems broken.
Good Luck.
精彩评论