Question

你好怎么可能
使用show或隐藏多个div
最快的方式
为什么我需要为每个div编号
像这样：
打开，关闭，show_text
open2，close2，show_text2
我希望每个div重复10次

$(document).ready(function(){
    $(".open").click(function(){
        $(".show_text").show('blind');
		$(".open").hide();
		$(".close").show();
    });
    $(".close").click(function(){
        $(".open").show();
		$(".show_text").hide('blind');
		$(".close").hide();
    });
});		
$(document).ready(function(){
    $(".open2").click(function(){
        $(".show_text2").show('blind');
		$(".open2").hide();
		$(".close2").show();
    });
    $(".close2").click(function(){
        $(".open2").show();
		$(".show_text2").hide('blind');
		$(".close2").hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open" style="cursor:pointer">Open 1
</div><!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div><!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div><!-- show_text -->

<div class="open2" style="cursor:pointer">Open 2
</div><!-- open -->
<div class="close2" style="cursor:pointer; display:none;">Close 2
</div><!-- close -->
<div class="show_text2" style="display:none;">
hello world 2
</div><!-- show_text -->

Answer 1

将内容包装在容器div中，然后您可以使用

.closest()

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

.find()

获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。

HTML 的

<div class="container">
    <div class="open" style="cursor:pointer">Open 1
    </div>
    <!-- open -->
    <div class="close" style="cursor:pointer; display:none;">Close 1
    </div>
    <!-- close -->
    <div class="show_text" style="display:none;">
    hello world 1
    </div>
</div>

代码的

$(".open").click(function() {
    //Traverse up to container div
    var container = $(this).closest('.container'); 

    //Use .find() to find child
});

以下是一个例子：

$(document).ready(function() {
  $(".open").click(function() {
    var continer = $(this).closest('.container');
    continer.find(".show_text").show('blind');
    continer.find(".open").hide();
    continer.find(".close").show();
  });
  $(".close").click(function() {
    var continer = $(this).closest('.container');
    continer.find(".open").show();
    continer.find(".show_text").hide('blind');
    continer.find(".close").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="open" style="cursor:pointer">Open 1
  </div>
  <!-- open -->
  <div class="close" style="cursor:pointer; display:none;">Close 1
  </div>
  <!-- close -->
  <div class="show_text" style="display:none;">
    hello world 1
  </div>
</div>
<!-- show_text -->
<div class="container">
  <div class="open" style="cursor:pointer">Open 2
  </div>
  <!-- open -->
  <div class="close" style="cursor:pointer; display:none;">Close 2
  </div>
  <!-- close -->
  <div class="show_text" style="display:none;">
    hello world 2
  </div>
</div>
<!-- show_text -->

Answer 2

＆＃13;

$(document).ready(function(){
    $("div[class^=open]").click(function(){
        $("div[class^=show_text]").show('blind');
		$("div[class^=open]").hide();
		$("div[class^=close]").show();
    });
    $("div[class^=close]").click(function(){
        $("div[class^=open]").show();
		$("div[class^=show_text]").hide('blind');
		$("div[class^=close]").hide();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open" style="cursor:pointer">Open 1
</div><!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div><!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div><!-- show_text -->

<div class="open2" style="cursor:pointer">Open 2
</div><!-- open -->
<div class="close2" style="cursor:pointer; display:none;">Close 2
</div><!-- close -->
<div class="show_text2" style="display:none;">
hello world 2
</div><!-- show_text -->

＆＃13;

Answer 3

根据您提供的详细信息，如果您还没有想到这一点，我认为完成此任务的最有效方法是使用循环（某种形式）。在我看来，如果你的目标是速度，这将是最有意义的。话虽如此，我认为尝试使用jQuery的show（）＆amp; hide（）只会阻止你。

如果你想＆＃34;数字＆＃34;每个元素，并根据特定情况在不同时间显示它们，想想JSON; JavaScript的年龄更大，更有吸引力的兄弟。如果需要，我很乐意为你提供进一步的帮助，否则，欢呼。

jquery show隐藏多个div最快的方式

3 个答案: