Question

有一个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 ...

有没有优雅的方法来实现这个功能？

任何建议都会有所帮助，

提前致谢

Answer 1

活动代表团。

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

在那里，我过滤了class属性以c开头的段落。这只是示范，但最终可能不是非常不透水。你应该给你的元素一个共同的类。如果这个课程是'clickablePara'，你可以改为使用

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

事件委派意味着您绑定一个事件并在触发元素触发时对其进行评估，而不是将大量事件绑定到每个可能的元素。如果这对你来说是新的，那就值得研究一下。如果你碰巧在英国，那么即将出版的.NET Magazine有一篇文章在我讨论它。

Answer 2

您可以为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

Answer 3

它确实没有说明用ajax插入的动态元素，所以我猜测这些元素是在输出页面之前在服务器端创建的，并且该委托是否是必要的？

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

FIDDLE

jQuery选择多个元素

3 个答案: