Question

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

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

我的show hide功能是

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

});

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

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

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

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
});

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

4 个答案: