Question

我总是在这里找到答案只是阅读线程，但现在是我的第一个线程的时间，因为我无法找到相关的问题：这是我的目标代码：

<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>

我通过jquery添加两个“span”元素：

$('.sizes a').click( 
        function (e) {
            e.preventDefault();
            $(this).after("<span class='checked'></span><span class='remove'></span>"); 
        }
);

在包裹的div中，这些s的最大数量是3次。所以我想做的是以下几点：

$(".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();
             } 
        }
    );

当然我的if语句是垃圾。我用自己的话说：如果span（class = panel）中有多个span（class = remove），那么什么都不应该发生但是如果在span（class = panel）中只剩下一个span（class = remove）那么应隐藏

我如何实现这一目标？有一个在线演示：http://bit.ly/972be4如你所见，每当我点击图像下方的按钮时，图像都会被标签标记。我想在没有选择按钮时隐藏这个标签（class = added）

非常感谢！来自德国的祝福

Answer 1

检查

$("span.panel").find("span.remove").length

或只是

$("span.panel span.remove").length

Answer 2

您可以将最后一位重写为以下内容：

$('.remove').live('click'), function() {
    if($(this).parents('.panel').find('.remove').length > 1)
        return;
    // there's only 1 - add the rest of the functionality here
}

虽然.parents（）和.find（）很贵，但如果你没有很多这些元素，那么开销可以忽略不计。

此外，如果'remove'元素始终是兄弟元素，请将第二行更改为：

if($(this).siblings('.remove').length)

Answer 3

以上答案是正确的。但正如我所看到的那样，你没有从DOM中移除那些'span.remove'，因此一旦添加它们，它将依赖于所有的情况。所以你必须检查他们的可见度。

if($(this).parent().parent().children().find('.remove:visible').length == 0){
   $(this).parent().parent().parent().next().children(".added").hide();
}

将是你的条件。

点击最后'.remove'时，这将隐藏黄色条

正如你刚刚问到如何隐藏那个栏，这就是这样做的。你可以考虑其他一些事情，这可能是有缺陷的，比如“重新显示.added栏以防再次选择一个”，逻辑似乎也被打破了。

祝你好运。

if语句检查可用元素

3 个答案: