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

Posted 2023-03-05

【中文标题】将特定元素的事件绑定到特定目标

【英文标题】：Bind event of a specific element to a specific target

【发布时间】：2012-10-18 14:04:14

【问题描述】：

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

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

【问题讨论】：

尝试使用$(this).closest("p").show('fast') 而不是$("p").show('fast')

如果您循环创建多个 id，它永远不会按预期工作。改用类

很抱歉，我是 jquery 的新手，无法找到您

@AbhishekTripathi - 看看我的回答，它应该可以解决你的问题。

我看到了一个</font> 标签。此标记在 html 4.01 中已弃用，在 HTML5 中不受支持。我建议您为此使用 css。

【参考方案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');

);

【讨论】：

我认为 p 在显示 id 的按钮之前关闭

:) 就像注释 man id 应该是唯一的，所以使用 class 其余看起来不错 :)

这将显示所有

我刚刚对其进行了编辑，因此它可以查看 p 标签。感谢您的提醒。

【参考方案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');
);

【讨论】：

谢谢。我真的很喜欢 SO 并尊重它的所有用户，从初学者到专业人士。 :)

【参考方案3】：

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

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

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

【参考方案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
);

【讨论】：

为什么...... this 在这里使用是正确的。

@webnoob 感谢您的反对。我相信你的回答不符合他的要求。你隐藏了按钮本身，而他希望按钮不被隐藏，他只想隐藏标题。这是一种非常简单直接的方式，不需要他更改 HTML 的结构（例如将按钮放在

如果我错了，请纠正我，但您新编辑的答案会使所有“P”标签在单击任何按钮时隐藏/显示。

不，它查看相对于已单击按钮的最后一个 p。

哦.. 叹息。我的手指有时会在我的大脑前接合。我赞成您的评论（指出我的错误），但我仍然不得不将其保留为反对意见，因为我认为在使用具有广泛选择器的 JQuery 等可访问的东西时它过于复杂。感谢您的指点。