使用Jquery在特定按钮单击上切换特定div

时间:2018-07-27 10:14:22

标签: javascript php jquery

  

我使用PHP和Jquery在单击按钮时切换div。   我想将特定按钮上的div切换到特定div。   例如:如果我单击第3个按钮,则仅切换第3个div及其内容。   **不按ID使用类,因为此div和按钮系列不是固定的。

$(document).ready(function(){
  $(".hide-demo").click(function(){
    $(".hideDemo").toggle();
  });    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hide-demo">Hide / Show 1</button>
<div class="hideDemo">
  <h1>Demo 1</h1>
</div>

<button class="hide-demo">Hide / Show 2</button>
<div class="hideDemo">
  <h1>Demo 2</h1>
</div>

<button class="hide-demo">Hide / Show 3</button>
<div class="hideDemo">
  <h1>Demo 3</h1>
</div>

<button class="hide-demo">Hide / Show 4</button>
<div class="hideDemo">
  <h1>Demo 4</h1>
</div>

<button class="hide-demo">Hide / Show 5</button>
<div class="hideDemo">
  <h1>Demo 5</h1>
</div>

2 个答案:

答案 0 :(得分:2)

当前选择器(pscale = 10. plot 'lhmi.md' u (1000+$1*pscale):($2) lc rgb 'red' lw 5.0 with fsteps )将$(".hideDemo")附加到所有toggle()类的div上。您必须使用hideDemothis来实现next()到您想要的特定元素。

更改

toggle()

收件人

$(".hideDemo").toggle();

 $(this).next(".hideDemo").toggle();
$(document).ready(function(){
  $(".hide-demo").click(function(){
    $(this).next(".hideDemo").toggle();
  });    
});

答案 1 :(得分:0)

使用此js代码,我认为它将根据您的html结构执行您想要的操作

$(document).ready(function(){
        $(".hide-demo").click(function(){
            $(this).next().toggle()
        });    
    });