Question

我正在尝试为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应该是类。

Answer 1

#select_something

是个身份证。 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');
    }
});

Answer 2

您应该为多个对象使用公共类，而不是公共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/

Answer 3

如其他答案和评论中所述，仅对唯一元素使用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代码那样彼此相邻放置，那么只需确保使用某种相对选择器选择textarea，这样就不会选择所有文本区域。例如，如果这两个是兄弟姐妹，但他们不是彼此相邻，请使用：$（this）.siblings（“。write_something”）

几个DOM对象的jQuery单个事件

3 个答案: