我的 jQuery 代码在 webkit 浏览器中不起作用 [重复]答案

【问题标题】：My jQuery code is not working in webkit browsers [duplicate]我的 jQuery 代码在 webkit 浏览器中不起作用 [重复]
【发布时间】：2015-04-02 23:00:24
【问题描述】：

This demo 正在使用 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");
});

【问题讨论】：

为什么不起作用？不工作怎么办？你怎么知道它不起作用？
1) 这是一个非常特殊的选择器 2) 鉴于 HTML，eq() 函数中的索引不正确。 3）使用select的val()和change函数来做你需要的事情
选项元素不能可靠地跨浏览器样式化，这就是为什么每个人在做花哨的下拉菜单时都会用常规元素替换它们
@adeneo 他给他们一个点击事件，而不是样式，虽然我认为你的评论仍然代表点击事件。
@RaselAhmed 我猜浏览器不支持选项元素上的点击事件。

标签： jquery google-chrome

【解决方案1】：

您在示例中使用的选择器是不必要的特定。此外，鉴于 HTML，您提供的 :eq 选择器的索引不正确。在处理select 元素时，您应该使用change 事件，以便您的代码适用于使用键盘导航的人。

话虽如此，您可以通过使用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");
    }
});

Updated fiddle

如果需要，您甚至可以使用三元表达式进一步缩短：

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

【讨论】：