Мой код jQuery не работает в браузерах webkit

Эта демонстрация работает в firefox. Но в браузерах webkit (Chrome, Safari) это не работает. Любые идеи?

Я действительно не могу этого понять. Nth-child css тоже работает. Вот код здесь

jQuery("#featured_1 .product-options .product-option:nth-child(2) .product-option-value option:nth-child(1)").click(function(){
    jQuery("body").css("background-color", "red");
});

jQuery("#featured_1 .product-options .product-option:nth-child(2) .product-option-value option:nth-child(2)").click(function(){
    jQuery("body").css("background-color", "green");
});

google-chrome jquery
person Rasel Ahmed    schedule 03.02.2015    source источник
comment
Почему не работает? Что насчет этого не работает? Откуда вы знаете, что это не работает?   -  person Kevin B    schedule 03.02.2015
comment
Что с этим не работает?   -  person Dave    schedule 03.02.2015
comment
1) Это до смешного специфический селектор 2) Учитывая HTML, индексы в функциях eq() неверны. 3) Используйте val() выбора и функцию change, чтобы делать то, что вам нужно.   -  person Rory McCrossan    schedule 03.02.2015
comment
элементы option не могут быть надежно стилизованы для кроссбраузерности, поэтому все заменяют их обычными элементами при создании причудливых раскрывающихся списков   -  person adeneo    schedule 03.02.2015
comment
@adeneo он дает им событие щелчка, а не стиль, хотя я думаю, что ваш комментарий по-прежнему относится и к событиям щелчка.   -  person Kevin B    schedule 03.02.2015
comment
Используйте событие change в раскрывающемся списке и оцените значение, вместо этого полагаясь на события щелчка для каждого значения параметра.   -  person Axel    schedule 03.02.2015
comment
@KevinB - Да, элементы option также не имеют надежных событий мыши.   -  person adeneo    schedule 03.02.2015
comment
Кажется, у меня работает на Chromium 39. Также Chrome / Chromium больше не использует Webkit, а Blink (для Webkit, но я бы сказал, что обработка Chrome и Safari так же больше не применима). Опубликованный вами JS также не имеет смысла. .product-option:nth-child(2) ничего не соответствует, так как есть только один .product-option   -  person Sergiu Paraschiv    schedule 03.02.2015
comment
Я имею в виду, что стиль работает. Но событие щелчка не работает @KevinB   -  person Rasel Ahmed    schedule 03.02.2015
comment
@RaselAhmed Я предполагаю, что браузеры не поддерживают события щелчка по элементам option.   -  person Kevin B    schedule 03.02.2015
comment
Прошу прощения за плохой английский. Спасибо за ваш комментарий. В следующий раз я постараюсь получше. @KevinB   -  person Rasel Ahmed    schedule 03.02.2015
comment
stackoverflow.com/ questions / 1402227 / и stackoverflow.com/questions/3419038/ и stackoverflow.com/questions/7080213/ и ...   -  person j08691    schedule 03.02.2015

Ответы (1)


arrow_upward
2
arrow_downward

Селекторы в вашем примере излишне специфичны. Кроме того, с учетом HTML индексы, которые вы предоставляете для селектора :eq, неверны. Вы должны использовать событие change при работе с элементами select, чтобы ваш код работал для людей, использующих клавиатуру для навигации.

При этом вы можете упростить свой код, используя change и вместо этого проверяя индекс выбранной опции:

$("#featured_1 .product-option-value").change(function(){
    if (this.selectedIndex == 0) {
        // first option:
        $("body").css("background-color", "red");
    } else {
        // second option
        $("body").css("background-color", "green");
    }
});

Обновленная скрипка

При необходимости вы можете даже сократить его, используя тернарное выражение:

$("#featured_1 .product-option-value").change(function(){
    $("body").css("background-color", this.selectedIndex == 0 ? "red" : 'green');
});
person Rory McCrossan    schedule 03.02.2015