jQuery多个按钮控制多个div

2016-07-22 11:13:19 385 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

【jQuery】使用id选择器，找出外层div中嵌套的内层div 场景：为了实现一个 toggle 效果，即第一次点击一个“添加”按钮之后，会在一个（外层）div的末尾append一个新的（内层）div，第二次点击这个按钮之后，希望这个新增的（内层）div可以被折叠。这时需要根据（内层）div的id，抓到这个（内层）的div，然后使用$("#div1").remove();删除它，从而实现 toggle 效果语法使用 jQuery id选择器 $("#... 阅读详情

<div class="com" id="t1">

<button onClick="showHide1()" >1</button>
<div class="yz" id="tex1" style="display: none;margin-bottom:20px;">
<span id="sp1">1.</span>ppppppp</br>
<span id="sp1">2.</span>ppppppppp。</br>
<span id="sp1">3.</span>ppppppppppppp。</br>

</div>

<button onClick="showHide2()" >2</button>
<div class="yz" id="tex2" style="display: none;margin-bottom:20px;">
<span id="sp1">1.</span>fgggffdff</br>
<span id="sp1">2.</span> dgdfgdfgdf</br>
<span id="sp1">3.</span> dfgdfgdfdf</br>
<span id="sp1">4.</span>fgdfgdfgdfgdf</br>
<span id="sp1">5.</span>dfgdfgdf</br>
<span id="sp1">6.</span>fdgdfgdfgdfgd</br>

</div>

<button onClick="showHide3()" > 3</button>
<div class="mz" id="tex3" style="display:none;margin-bottom:20px;">
<span id="sp1">1.</span>sdfsfsd</br>
<span id="sp1">2.</span>sdfsdfsdfsd</br>

</div>
<div>

<script>
function showHide(){
var t=document.getElementById("tex");

if(t.style.display==""||t.style.display=="block"){
t.style.display="none";}
else{
t.style.display="block";
}
}
function showHide1(){
var t=document.getElementById("tex1");

if(t.style.display==""||t.style.display=="block"){
t.style.display="none";}
else{
t.style.display="block";
}
}
function showHide2(){
var t=document.getElementById("tex2");

if(t.style.display==""||t.style.display=="block"){
t.style.display="none";}
else{
t.style.display="block";
}
}
function showHide3(){
var t=document.getElementById("tex3");

if(t.style.display==""||t.style.display=="block"){
t.style.display="none";}
else{
t.style.display="block";
}
</script> }

我现在是用的JavaScript写的，要是我之后有100000更多的按钮页要写更多的showHide方法，用jQuery就不用这么麻烦可是我写了不管用，求大神指点！！！！
<div class="com" id="t1">

<button onClick="showHide()" >1</button>
<div class="yz" style="display: none;margin-bottom:20px;">
<span id="sp1">1.</span>ppppppp</br>
<span id="sp1">2.</span>ppppppppp。</br>
<span id="sp1">3.</span>ppppppppppppp。</br>

</div>

<button onClick="showHide()" >2</button>
<div class="yz" style="display: none;margin-bottom:20px;">
<span id="sp1">1.</span>fgggffdff</br>
<span id="sp1">2.</span> dgdfgdfgdf</br>
<span id="sp1">3.</span> dfgdfgdfdf</br>
<span id="sp1">4.</span>fgdfgdfgdfgdf</br>
<span id="sp1">5.</span>dfgdfgdf</br>
<span id="sp1">6.</span>fdgdfgdfgdfgd</br>

</div>

<button onClick="showHide()" > 3</button>
<div class="mz" style="display:none;margin-bottom:20px;">
<span id="sp1">1.</span>sdfsfsd</br>
<span id="sp1">2.</span>sdfsdfsdfsd</br>

</div>
<div>
<script>
function showHide(btn) {
var div = $(btn).next()
$(btn).parent().find('div').not(div).hide();
div.toggle();

}
$(function () {
$('#t1').find('div.yz').find(':button').click(function () { showHide(this); })
});
</script>

...全文