Question

如何在一个页面上使用多个切换？
我的HTML文件中有两个div，我希望隐藏或删除child-1 div，然后在每次单击父标题时替换为另一个div child-2。
我的HTML结构如下：

$(document).ready(function(){ 
  $('.child_1').show();
  $('.child_2').hide();

  $('.parent').click( function() {
	$(this).each( function() {
	  $('.child_1, .child_2').toggle();
	});
  });
});

.child_1, .child_2 {
  background-color: red;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"> 
 <h2>Title One</h2>
 <div class='child_1'>paragraph 1</div>
 <div class='child_2'>paragraph 2</div>
</div>
			
<div class="parent"> 
 <h2>Title Two</h2>
 <div class='child_1'>paragraph 1</div>
 <div class='child_2'>paragraph 2</div>
</div>

这项工作非常完美，但当我点击一个元素时，其他元素也会发生变化。

请参见此处：JSFiddle。

Answer 1

代码中的错误：

以下代码在.toggle()的每个实例上调用$('parent')，从而将.click()逻辑应用于所有.parent元素，而不仅仅是单击的元素：

$('.parent').click( function() {
    $(this).each( function() {
      $('.child_1, .child_2').toggle();
    });
  });

为了解决这个问题，可以按如下方式重写：

  $('.parent').click( function() {
    $(this).children('div').toggle('.child_1, .child_2');
  });

建议的方法：

解决此问题的最佳方法是点击时在.parent元素上使用.toggleClass()。

当出现时，课程将决定指定儿童的状态 - 当show显示.parent时课程.child_2处于活动状态时以及未显示child_1时。这样您就可以将一个状态设置为初始视图，从而无需在加载时.hide()加载它。

最佳做法是尽可能使用css控制视觉状态（即使用display: none和/或display: block的类）并根据父元素的州/阶级。

＆＃13;

$(document).ready(function(){ 
  $('.parent').click( function() {
			$(this).toggleClass('show');    
    });
});

＆＃13;

.child_1, .show .child_2 {
  display: block;
}
.child_2, .show .child_1 {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"> 
  <h2>Title</h2>
  <div class='child_1'>paragraph 1</div>
  <div class='child_2'>paragraph 2</div>
</div>
		
<div class="parent"> 
  <h2>Title</h2>
  <div class='child_1'>paragraph 1</div>
  <div class='child_2'>paragraph 2</div>
</div>

＆＃13;

Answer 2

稍微更改你的js功能：

$(document).ready(function(){ 
$('.child_1').show();
$('.child_2').hide();

$('.parent').click( function() {
$(this).each( function() {
  $('.child_1, .child_2',this).toggle();
  });
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"> 
 <h2>Title One</h2>
 <div class='child_1'>paragraph 1</div>
 <div class='child_2'>paragraph 2</div>
</div>
    		
<div class="parent"> 
 <h2>Title Two</h2>
 <div class='child_1'>paragraph 1</div>
 <div class='child_2'>paragraph 2</div>
</div>

Answer 3

只需切换div孩子。

$(function(){ 
  $('.parent').click( function() {
    $(this).children("div").toggle();
  });
});

http://jsfiddle.net/jakecigar/cc3bmxx8/18/＆lt; -

如何在一个页面上使用多个切换JQuery？

3 个答案:

代码中的错误：

建议的方法：