在onclick事件上滑动隐藏的div

Question

我有以下php while循环代码：

while (...($...)){
$convid = $row['ID'];

 echo"
<button onclick='getconvo($convid)'>open</button>


    <div class="convowrap"></div>
    ";


    }

和JavaScript代码

<script type='text/javascript'>
$(document).ready(function(){
$(".convowrap").hide(0)
})
</script>

script type='text/javascript'>
function getconvo(id){
$(".convowrap").hide(0).delay(200).slideDown(500)
var convid = id;
$('.convowrap').load('fetch_info.php', {id : convid}, function () {

       // do something when success
  });
 }
 </script>

当我点击上面显示'打开'的按钮时，所有表示convowrap的div都会滑动，但我只希望当前的div基于点击的按钮来滑动，该按钮是从php while循环生成的。 如果php循环执行了三次，当我点击第一个循环生成的第一个按钮时，convowrap div会滑动循环生成的所有三个条目。

我该怎么办？ 请帮忙？

提前致谢。

Answer 1

问题是所有的div都有相同的类，所以它的功能与你应该的...

因为您可以在按钮后面使用div来替换

 $(".convowrap")

同

$(this).next()

在.load和.hide的函数内（无论你想要哪个）

更通用

为每个div分配另一个类可能更有用

<div class='convowrap dummyclass$convid'></div>

然后在按钮上单击更改选择器以匹配该类

 $('dummyclass'+id)

希望这可以帮助

Answer 2

当你在HTML中使用内联onlclick函数时，你必须像onclick='getconvo(this)'那样明确地传递this 。

无论如何，请看下面的小提琴，希望你想要这个解决方法 -

https://jsfiddle.net/nuhil/4scas2gh/

码：

<button onclick='getconvo(this)' id="1">Button 1</button>
<div class="convowrap">Content First</div>
<br/>
<button onclick='getconvo(this)' id="2">Button 2</button>
<div class="convowrap">Content Second</div>
<!-- More pairs of (button and div) go here -->

<script>
  $(document).ready(function(){
    $(".convowrap").hide();
  })

  function getconvo(button){
      $(button).next().delay(200).slideDown(500); 
      // You could use toggle here like following for better UX
      // $(button).next().toggle("slow"); 

      // Anyway,
      // Get the id from button attribute but make sure you already set it by PHP
      var convid = $(button).attr("id");
      console.log(convid);

      // $(button).next().load('fetch_info.php', {id : convid}, function () {
      // do something when success
      // });
  }  
</script>