jQuery从多个元素中选择


jQuery Selection Out Of Multiple Elements

由于用户的查询,有一个php脚本可以创建多个<p>text</p>元素。我想创建一个选项,每次用户单击某个元素时,该元素中的文本都会出现在文本框中。完成此类任务的直观方法是:

<p class="c1"> textA...</p>
<p class="c2"> textB...</p>
<p class="c3"> textC...</p>
<p class="c4"> textD...</p>

jQuery代码将为:

$("p.c1").click(function(){ code... }
$("p.c2").click(function(){ code... }
etc ...

有什么优雅的方法来实现这个功能吗?

,任何建议都会有帮助

提前感谢

事件委派。

$('body').on('click', 'p[class^=c]', function(evt) {
    var clickedPara = $(this);
});

在那里,我过滤class属性以c开头的段落。这只是一个示范,但最终可能不是很严密。你应该给你的元素一个公共类。如果这个类是,比如说,"clickablePara",你可以使用

$('body').on('click', 'p.clickablePara', function(evt) {

事件委派意味着绑定一个事件并在触发器元素触发时对其求值,而不是将许多事件绑定到每个可能的元素。如果这对你来说是新的,那么值得一探究竟。如果你碰巧在英国,即将出版的.NET杂志上有一篇我的文章在讨论它。

您可以为HTML元素分配多个类。您可以更改PHP脚本以输出多个类。即

<p class="c1 clickable"> textA...</p>
<p class="c2 clickable"> textB...</p>
<p class="c3 clickable"> textC...</p>
<p class="c4 clickable"> textD...</p>

然后你可以使用点击功能。

   $("p.clickable").click(function () {
                $('#yourtextbox').val($(this).text());
            });

JSFIDDLE

它没有说明使用ajax插入的动态元素,所以我猜这些元素是在页面输出之前在服务器端创建的,不需要委派吗?

$("p[class^='c']").on('click', function() {
    $("#textboxID").val(this.innerHTML);
});

FIDDLE