Использование jquery для скрытия и отображения элемента div не работает

У меня есть страница продукта woocommerce — вот ссылка — http://icestartup.com/testsites/ujsnkfvs22/wordpress/product/2-door-wardrobe/

Это страница продукта woocommerce.

На этой странице я пытаюсь скрыть и показать тег div, когда я изменяю меню выбора под названием «Выбери свой ламинат».

Вот код, который я использовал. Обратите внимание, что «выбери свой ламинат» — это идентификатор тега выбора.

<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>

Все равно НИЧЕГО НЕ ПРОИЗОШЛО.

Что здесь происходит? Ребята, вы можете найти проблему?

Вы можете убедиться, проверив веб-страницу, на которой размещен код, это будет слишком хорошо.

Ссылка здесь


javascript wordpress jquery woocommerce custom-wordpress-pages
person Adam    schedule 25.06.2016    source источник
comment
Это не правильный обработчик готовности DOM для Wordpress, вы должны использовать jQuery(document).ready(function($) {...   -  person adeneo    schedule 25.06.2016
comment
@mplungjan - почему?   -  person adeneo    schedule 25.06.2016
comment
@mplungjan - Wordpress по умолчанию находится в режиме NoConflict?   -  person adeneo    schedule 25.06.2016
comment
@mplungjan Этот дубликат неверен.   -  person Spencer Wieczorek    schedule 25.06.2016
comment
@mplungjan Да, потому что здесь будет работать $("#id").val(), и это то, что следует использовать. В этом вопросе это потому, что у параметров нет атрибута value.   -  person Spencer Wieczorek    schedule 25.06.2016
comment
Вот как это должно выглядеть -› jsfiddle.net/hq0bgruq   -  person adeneo    schedule 25.06.2016
comment
@SpencerWieczorek - дубликат показывает оба. Теперь я проверил сайт OPs, и .val() действительно можно использовать, как и .text()   -  person mplungjan    schedule 25.06.2016
comment
@adeneo - хорошо, возможно, WP выиграет, но console.log($.fn.jquery) показывает правильную версию jQuery, поэтому она загружена и активна   -  person mplungjan    schedule 25.06.2016
comment
@mplungjan Я не думаю, что ты понимаешь мою точку зрения. Вся цель этого вопроса заключается в том, почему .val() нельзя использовать на select. Создание дубликата делает то же предположение и дезинформирует пользователей.   -  person Spencer Wieczorek    schedule 25.06.2016
comment
@mplungjan - это здорово, теперь объясните, почему второй фрагмент кода только с предупреждением не работает, а на сайте OP он даже $('select').change... и все еще не вызывает предупреждение.   -  person adeneo    schedule 25.06.2016
comment
@adeneo Он отлично работает только с выбранным и используемым фрагментом JS. Так что что-то должно мешать этому (вероятно, Wordpress, как вы сказали), или они используют кешированную версию, когда тестировали ее. Но да, пользователю нужно сделать фрагмент/скрипку, чтобы создать проблему.   -  person Spencer Wieczorek    schedule 25.06.2016
comment
Действительно, что-то мешает выбору. Возможно, какой-нибудь красивый отборный или подобный. Я снова открыл вопрос.   -  person mplungjan    schedule 25.06.2016
comment
Не думайте, что это решит вашу проблему, но если ваши значения параметров соответствуют вашим классам div, вы можете сделать отображение и скрытие немного проще. jsfiddle.net/1byxtm9k   -  person IrkenInvader    schedule 25.06.2016
comment
Тяжелая страница что-то делает с DOM. Это работает, но не является решением: setTimeout(function() { $("#height").on("change",function(){console.log("yes")}) },3000)   -  person mplungjan    schedule 25.06.2016
comment
@mplungjan - он работает, если снова запустить код OP в консоли, он просто не работает при первой загрузке страницы, поэтому элементы, вероятно, каким-то образом изменяются или перемещаются во время загрузки страницы.   -  person adeneo    schedule 25.06.2016
comment
Ребята, я в ловушке. На самом деле, если я использую .click вместо .change его работы. Есть ли что-то, что я могу сделать, например, использовать javascript без jquery или что-то в этом роде?   -  person Adam    schedule 25.06.2016
comment
@SpencerWieczorek Я не понял, почему работает $(this).value, а не $(this).children(option).attr(:selected). Можете ли вы объяснить это ясно, если это возможно?   -  person Adam    schedule 26.06.2016
comment
@Adam В основном $('#mySelect').val() - это стандартный способ получить значение выбранного элемента в jQuery. Похоже, вы пытаетесь получить элемент с атрибутом selected. Так как в нем должно быть <option ... selected ... >, хотя этот код все равно не будет работать даже в этом случае. Метод .attr() обращается только к первому элементу и при этом не поддерживает получение selected. Вместо этого вы хотели бы сделать: $('#mySelect').children("option:selected").val(), но опять же было бы лучше просто сделать $('#mySelect').val().   -  person Spencer Wieczorek    schedule 26.06.2016

Ответы (2)


arrow_upward
0
arrow_downward

подробнее здесь
попробуйте следующее:

$("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();
    }
});
person Anuj Khandelwal    schedule 25.06.2016
comment
Нет, проблема в том, что им нужно использовать $(this).val(), чтобы получить выбранный элемент. Если они явно не определили атрибут selected в одном из параметров, он будет неопределенным. - person Spencer Wieczorek; 25.06.2016

arrow_upward
0
arrow_downward

Я внес некоторые изменения в соответствии с тем, что рассказали Spencer Wieczorek и mplungjan. Что я сделал, так это то, что я использовал некоторую задержку, используя функцию settimeout в javascript, и код jquery также нуждался в изменении.

Теперь это работает. Вы можете проверить ссылку - ССЫЛКА

<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>

Я не думаю, что это элегантное решение. Вы, ребята, знаете, почему я должен использовать задержку? Есть ли альтернативный кусок кода?

person Adam    schedule 25.06.2016