2

我正在使用while循环输出数据

   <p><?php echo $title;?></p></font></a><button id=show>show()</button>               <button id=hide>hide()</button>

我的显示隐藏功能是

$("#show").click(function () {
   $("p").show('fast');

});

$("#hide").click(function () {
   $("p").hide('fast');
});

 $("#reset").click(function(){
    location.reload();
});

现在，当我单击显示隐藏时，只有第一个显示隐藏循环正在工作，它显示/隐藏所有数据，而不仅仅是我单击的数据

4

4 回答 4

6

更改要使用的代码this，如下所示：

$(this).prev('p').show('fast');

您需要在每个 JQuery .click 部分中执行此操作。

编辑：已经提到的另一个好点，您正在为您的元素使用一个 ID，它不允许它在多个上工作。您的新标记应如下所示：

<p><?php echo $title;?></p></font></a><button class="show">show()</button>

和jQuery：

$(".show").click(function () {
   $(this).prev('p').show('fast');

});
于 2012-10-29T09:08:02.410 回答
1

欢迎来到 SO。很高兴看到您已经很好地形成了您的第一个问题。

您可能想要改变的东西很少。

当您通过循环时，请确保在循环内使用计数器并将计数器添加到 id。这将使 id 成为唯一标识符。也将它们包装在一个 div 中。

 $counter = 0;
 forloop {

    $counter++;
    <div>
    <p><?php echo $title;?></p></font></a><button id="show<?php echo $counter; ?>">show()</button>
    </div>        

 }

所以现在你的 id 将是唯一的。现在您可以通过以下方式编写您的 jquery。

$("button").click(function () {
  $(this).attr('id'); //not required but incase you need the id of the button which was clicked.
  $(this).parent().find("p").show('fast');

});

$("button").click(function () {
   $(this).parent().find("p").hide('fast');
});
于 2012-10-29T09:17:16.347 回答
0

两件事：1.我认为你只能有一个带有一个id的元素，例如#show。如果你想引用更多的按钮，你应该使用一个类，比如：show()（据我了解，按钮是循环输出的，会有更多的）。

第二：在您的 javascript 代码中，您执行 $("p")... - 这引用了所有

页面上的元素。我认为你应该使用 $(this) 并从那里开始，看看这篇文章，它解释了很多：http ://remysharp.com/2007/04/12/jquerys-this-demystified/

于 2012-10-29T09:11:23.177 回答
-1

有很多方法可以解决这个问题。这是一个：

首先，将循环编号添加到 ID（假设它是 $i）

<p id="TITLE_<?php echo $i; ?>" style="display:none;"><?php echo $title;?></p>
<input type="button" class="show" data-number="<?php echo $i; ?>"/>               
<input type="button" class="hide" data-number="<?php echo $i; ?>" />

您的功能将是：

$(".show").click(function () {
   $("TITLE_" + $(this).data('number')).show('fast');
});

$(".hide").click(function () {
    $("TITLE_" + $(this).data('number')).hide('fast');
});

当然，有一些方法可以通过 JQUERY 来完成，而无需使用 $i。

编辑：拥有

页面加载时隐藏的标签，或者使用我在

上面的标记，或者您可以使用 JQuery，如下所示：

$(document).ready( function() {
    $("p[id^=TITLE_]").hide(); 
// this will retrieve all <p> tags with ID that starts                    
// with TITLE_ and hide them
});
于 2012-10-29T09:15:24.263 回答