jQuery多个DOM对象的单个事件

jQuery single event for several DOM objects

本文关键字：单个 事件 对象 多个 DOM jQuery      更新时间：2023-09-26

我正在尝试为DOM中的几个对象创建一个更改事件触发器。让我给你看看；我有这个代码

$(document).ready(function() {
    $(".select_something").change(function() {
        if (!($(".select_something option[value='0']").attr("selected"))) {
            $(".write_something").css('display','');
        }
        else
        {
            $(".write_something").css('display','none');
        }
    });
});

有了这个，我有了几个选择器/下拉列表，所有这些都被称为.select_something。当选项不是默认值（即0）时，它应该显示一个<textarea></textarea>，所有这些都被称为.write_something。

总而言之，这是一个非常简单的函数。

我遇到的问题是，这只影响第一对.select_something、.write_something，其余的都不受影响。

我试着和.find()、.parent()和.children()混合，看看它是否能粘住，但没有。

如何在触发时更改所有.select_something、.write_something对？

编辑：ID当然应该是类

#select_something

是id。的id在整个页面上必须是唯一的。如果您有多个具有相同id的元素，那么这是根本错误的（并且会给您带来巨大的问题）。

话虽如此，修复方法很简单：将这些id更改为css类。

<select id="select_something">

成为

<select class="select_something">

然后，您可以根据css类进行选择，但当然，您必须选择相对于当前选择的：write_something元素。根据你的结构，这样的东西可能会起作用：

$(".select_something").change(function() {
    if (!($("option[value='0']", this).attr("selected"))) {
        $(this).siblings(".write_something").css('display','');
    }
    else
    {
        $(this).siblings(".write_something").css('display','none');
    }
});

您应该为多个对象使用公共类，而不是公共ID。

ID属性用于标识单个项目。CLASS属性用于定义一个项是一组项的一部分，所有项都具有相同的类名。

在所有这些类上使用类名selectObject，然后。。

$(document).ready(function() {
    $(".selectObject").change(function() {
        //inside of an event, $(this) refers to the object that triggers the event,
        //in this case, the item that was clicked.
        if (!($(this).val()==0)) {
            ...
        }
        else
        {
            ...
        }
    });
});

这里有一些例子。http://jsfiddle.net/FxLSR/1/

正如其他答案和评论中所提到的，只对唯一元素使用ID，对多个元素使用类。

这就是我设置代码的方式：

HTML:

<div>
   <select class="select_something"> ... </select>
   <textarea class="write_something"> ...</textarea>
</div>
<div>
   <select class="select_something"> ... </select>
   <textarea class="write_something"> ...</textarea>
</div>
etc...

Javascript：

$(document).ready(function() {
    $(".select_something").change(function() {
        if (!($(this).val() == "0") {
            $(this).next().show();
        }
        else
        {
            $(this).next().hide();
        }
    });
});

如果元素不能像我给出的示例HTML代码中那样并排放置，那么只需确保使用某种相对选择器来选择文本区域，这样就不会选择所有的文本区域。例如，如果这两个是兄弟姐妹，但它们不相邻，则使用：$（this）.兄弟姐妹（".write_something"）

相关文章：