将特定元素的事件绑定到特定目标

Question

我正在使用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();
});

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

Answer 1

将代码更改为使用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');

});

Answer 2

欢迎来到 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');
});

Answer 3

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

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

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

Answer 4

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

首先，将循环编号添加到 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 来完成。

编辑：拥有

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

中添加的 style=display:none

标签，或者你可以使用 JQuery 如下：

$(document).ready( function() {
    $("p[id^=TITLE_]").hide(); 
// this will retrieve all <p> tags with ID that starts                    
// with TITLE_ and hide them
});