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

Question

  

我使用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>

Answer 1

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

更改

toggle()

收件人

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

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

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

Answer 2

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

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