javascript - 如何在jquery中为动态数据创建函数

Question

我尝试创建聊天框关闭按钮，并尝试学习如何将我的 jquery 函数简化为一个动态函数，您可以在此处查看我的 jsfiddle

这是一些代码片段：

//Close chat
$('.close1').click(function () {
    //do what ever you want here
    $('.wrap_box1').hide();
});

$('.close2').click(function () {
    //do what ever you want here
    $('.wrap_box2').hide();
});

$('.close3').click(function () {
    //do what ever you want here
    $('.wrap_box3').hide();
});

这个脚本可能会循环到 10 或 20 次，所以我希望我有一个可以保存缩小这个脚本的函数。

Answer 1

您可以分别对 p 使用公共类，对 div 和相关使用公共类。

现场演示

html

<p class='close'>Close 1</p>
<div class="wrap_box">Content here</div>
<p class='close'>Close 2</p>
<div class="wrap_box">Content here</div>
<p class='close'>Close 3</p>
<div class="wrap_box">Content here</div>

Javascript

$('.close').click(function () {
    $(this).next('.wrap_box').hide();
});

根据 OP 评论编辑

您使用了错误的类来绑定事件，您还需要 find 而不是 next

现场演示

html

<div class="wrap_box">
    <p class='close'>Close 1</p>Content here</div>
<div class="wrap_box">
    <p class='close'>Close 2</p>Content here</div>
<div class="wrap_box">
    <p class='close'>Close 3</p>Content here</div>

Javascript

$('.wrap_box').click(function () {
    $(this).find('.close').hide();
});