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>

当我点击上面显示“打开”的按钮时，＆＃39;所有表示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函数时，您必须明确地传递this onclick='getconvo(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>

在onclick事件

2 个答案: