Question

我尝试创建聊天框关闭按钮，我尝试学习如何将我的jquery函数简化为一个动态函数，你可以检查我的jsfiddle here

这是一些代码段：

//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的公共类，并分别关联。

<强> Live Demo

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评论

您使用了错误的类来绑定事件，您还需要查找而不是下一步

<强> Live Demo

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

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

1 个答案: