Question

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");
});

Answer 1

您示例中的选择器不必具体。另外，给定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");
    }
});

Updated fiddle

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

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

我的jQuery代码在webkit浏览器中不起作用

1 个答案: