одиночное событие jQuery для нескольких объектов DOM

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 получилиизменено при срабатывании?

Редактировать: Конечно, идентификаторы должны быть классами.

Answer 1

#select_something

Идентификатор. Идентификаторы должны быть уникальными для всей вашей страницы. Если у вас есть несколько элементов с одним и тем же идентификатором, это в корне неверно (и приведет к серьезным проблемам).

Сказав это, исправить легко: измените эти идентификаторы на классы 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

Как уже упоминалось в других ответах и ​​комментариях, используйте только идентификатор для уникальных элементов, используйте класс для нескольких элементов.

Вот так я бы настроил свой код:

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) .siblings (". Write_something")

Answer 3

Вы должны использовать общий класс для нескольких объектов, а не общий идентификатор.

Атрибут 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/