Question

我有四个div，每个div都有一个图像。所有图像最初都是隐藏的，并会在点击时显示。我想一次只显示最多两个图像，如果点击了第三个应该被阻止的图像。请帮忙。我可能需要使用bind和unbind。

<script>
$(document).ready(function() {
    $('.outline img').hide().closest('div').click(function(e) {
        e.preventDefault();
        $('img',this).toggle();
    });
});
</script>

<div class="outline">
    <div id="one"><a href="#"><img id="11" src="1.png"></a></div>
    <div id="two"><img  id ="12" src="2.png"></div>
    <div style="clear:both;"></div>

    <div id="three"><img id="21" src="2.png"></div>
    <div id="four"><img id="22" src="1.png"></div>
    <div style="clear:both;"></div>
</div>

Answer 1

在此上下文中使用:hidden代替hide

$('.outline img:hidden').parent().click(function(e) {
        e.preventDefault();
        $('img',this).toggle();
 });

Answer 2

试试这个例子

var toggled = 0;
$(document).ready(function() {
$('.outline img').hide().closest('div').click(function(e) {
    e.preventDefault();
    if($('img',this).hasClass("toggle")){
      $('img',this).removeClass("toggle").toggle();
      var toggled--;
    } else {
      if (toggled < 2) {
      $('img',this).addClass("toggle").toggle();
      var toggled++;
    }
    $('img',this).toggle();
});
});

它将跟踪切换的var中切换的数量，当你切换它时，你将添加show类，如果有2个打开则无法打开其他类。关闭对切换的var进行减1。所以它应该以这种方式工作，并且你有一些数据/类可以检查如何以及哪些是开放的。

Answer 3

检查它是否是您需要的。你的问题和代码似乎有些混乱，但我努力做到正确：

$(function() {
    var outline = $('.outline');

    outline.find('img').closest('div').click(function(e) {
        e.preventDefault();

        var that = $(this);

        if (that.parents('.three').length > 0) {
            return false;
        }

        if (outline.find('img:visible').length >= 2) {
            return false;
        }

        that.show();
    });
});

Answer 4

试试这段代码。

$(document).ready(function() {
    $('.outline img').hide().closest('div').click(function(e) {
        e.preventDefault();
        if($("img",this).is(":visible")) {
            $('img',this).toggle();
        }
        else if($('img:hidden').length > 2) {
            $('img',this).toggle();
        }
    });
});

我如何一次只显示2个div

4 个答案: