Question

我有一个woocommerce产品页面 - 这是链接 - http://icestartup.com/testsites/ujsnkfvs22/wordpress/product/2-door-wardrobe/

这是一个woocommerce产品页面。

在该页面中，当我更改名为“Pick Your Laminate”的选择菜单时，我试图隐藏并显示div标签。

这是我用过的代码 - 请注意，“pick-your-laminate”是select标签的id。

<script type="text/javascript">
$(document).ready(function(){
    $("#pick-your-laminate").change(function(){
        if($(this).children("option").attr(":selected")=="Plain Laminate"){
            $(".box").not(".plain").hide();
            $(".plain").show();
        }
        if($(this).children("option").attr(":selected")=="Digital Laminate"){
            $(".box").not(".digital").hide();
            $(".digital").show();
        }
    });
});
</script>

这不起作用。我的意思是，当我更改选择菜单选项时，一切都没有发生。所以我让代码更简单，我只是想在更改下拉菜单时会显示警告框。下面是新代码 -

<script type="text/javascript">
$(document).ready(function(){
    $("#pick-your-laminate").change(function(){
       alert( "Handler for .change() called." );
    });
});
</script>

仍然没有发生。

发生了什么事？你们能找到问题吗？

您可以通过检查放置代码的网页进行验证，这样做太好了。

Link here

Answer 1

find more here
试试这个：

$("body").on('change', '#pick-your-laminate', function(){
    if($(this).children("option").attr(":selected")=="Plain Laminate"){
        $(".box").not(".plain").hide();
        $(".plain").show();
    }
    if($(this).children("option").attr(":selected")=="Digital Laminate"){
        $(".box").not(".digital").hide();
        $(".digital").show();
    }
});

Answer 2

我根据Spencer Wieczorek和mplungjan的说法做了一些改变。我所做的是我在javascript中使用settimeout函数时使用了一些延迟，jquery代码也需要更改。

现在它正在运作。您可以查看链接 - LINK

<script type="text/javascript">
        $(document).ready(function(){
            setTimeout(function(){ 
                $("#pick-your-laminate").on('change', function(){
                    if ( this.value == "Plain Laminate" ) {
                        $(".box").not(".plain").hide();
                        $(".plain").show();
                    } else if ( this.value == "Digital Laminate" ) {
                        $(".box").not(".digital").hide();
                        $(".digital").show();
                    }
                });
            }, 3000);
        });
    </script>

我不认为这是一个优雅的解决方案。你们有什么想法我应该延迟吗？有替代的代码吗？

使用jquery隐藏和显示div元素不起作用

2 个答案: