Question

在这段代码中，我想在所有div元素显示为none之后将段落文本更改为murderer。在这个问题中，段落文本更改为凶手，只有一个div元素显示为none。我明白我可以使用if语句并为display：none单独提供条件然后运行该函数但是如果有100个div元素则该怎么办。这只是一个有趣的实验，我需要一种有效的方法来做到这一点。

＆＃13;

<!doctype html>
<html>
<head>
    <title>Learning jQuery</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    	#green {
    		width:200px;
    		height:200px;
    		background-color:green;
    		border-radius:50%;
    		margin-top:50px;
    	}
    	.red {
    		width:200px;
    		height:200px;
    		background-color:red;
    		margin-top:50px;
    	}
    </style>	
</head>

<body>
	<div id="green"></div>
	<div class="red"></div>
	<div class="red"></div>
	<h1 id="murder">Hello</h1>
	<script>
		$("murder").html("murderer!");
		$("div").click(function() {
			$(this).css("display", "none");
			if ($("div").css("display") == "none") {
				$("#murder").html("murderer!");	
			}
		});
	</script>
</body>
</html>

＆＃13;

Answer 1

使用jQuery＆＃39; :visible选择器：

           List<StreamListener> listeners = new ArrayList<StreamListener>();
           StreamListener streamListener = new StreamListener() {               
            @Override
            public void onWarning(StreamWarningEvent warningEvent) {}

            @Override
            public void onTweet(Tweet tweet) {}

            @Override
            public void onLimit(int numberOfLimitedTweets) {}

            @Override
            public void onDelete(StreamDeleteEvent deleteEvent) {}
        };
        listeners.add(streamListener);      
        //to-do geolocation based stream filter
        twitter.streamingOperations().filter("tesla", listeners);
        Thread.sleep(10000);

Answer 2

这会给你你想要的吗？您可以使用事件设计更复杂/更复杂的解决方案，但这可能对您的要求有些过分？


$("div").click(function() {
    $(this).hide();

    if ($("div:visible").length == 0) {
        $("#murder").html("murderer!"); 
    }
});

Answer 3

这应该这样做。

    $("div").click(function() {
        $(this).hide();
        if (!$('div:visible').length) {
            $("#murder").html("murderer!"); 
        }
    });

Answer 4

样本：

        $("murder").html("murderer!");
        $("div").click(function () {
            $(this).css("display", "none").addClass("hidden");
            alert($("div.hidden").length);
            if ($("div.hidden").length == 3) {
                $("#murder").html("murderer!");
            }
        });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
        #green {
            width: 200px;
            height: 200px;
            background-color: green;
            border-radius: 50%;
            margin-top: 50px;
        }

        .red {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 50px;
        }
    </style>


    <div id="green"></div>
    <div class="red"></div>
    <div class="red"></div>
    <h1 id="murder">Hello</h1>

Answer 5

您还可以使用every功能：

function isInvisible(e) {
  return e.style.display == "none";
}


$("div").click(function() {
  $(this).css("display", "none");
  if ($("div").toArray().every(isInvisible)) {
    $("#murder").html("murderer!");	
  }
});

#green {
  width:50px;
  height:50px;
  background-color:green;
  border-radius:50%;
  margin-top:10px;
}
.red {
  width:50px;
  height:50px;
  background-color:red;
  margin-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="green"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<h1 id="murder">Hello</h1>

当所有div元素都设置为display：none时运行函数

5 个答案: