Блог

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

Я взял (бесплатную) тему начальной загрузки для веб-сайта электронной коммерции и пытаюсь применить к ней некоторые события jQuery, чтобы узнать, как все это сочетается. Некоторые вещи работают хорошо, а другие — совсем нет. Моя цель здесь — обработать событие выпадающего списка (select) и перезагрузить элемент div на основе результата. До сих пор я не мог ни действовать ПО списку, ни обрабатывать события ИЗ него.

Выбор содержится в приведенном ниже разделе. Существует метка под названием «sortby» и поле выбора, называемое «sortorder».

                 <div class="shop-top">
                    <div class="shop-shorter">
                        <div class="single-shorter">
                            <label id = "sortby">Sort By :</label>
                            <select name="sortorder" id="sortorder">
                                <option selected="selected">Name</option>
                                <option>Barcode</option>
                                <option>Price</option>
                            </select>
                        </div>
                    </div>

                </div>
 

Это три примера сценариев, которые я пытаюсь заставить работать, чтобы немного понять jQuery. Я поместил их все в раздел head и включил jquery

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript" >
    $(document).ready(function(){
      $("#sortby").click(function(){
        $("#sortby").hide();
      });
    });
</script>
 

Этот работает нормально. Я нажимаю на ярлык, и ярлык исчезает.

 <script type="text/javascript" >
    $(document).ready(function(){
      $("#sortby").click(function(){
        $("#sortorder").hide();
      });
    });
</script>
 

Этот вариант не работает. Я нажимаю на ярлык, и список выбора не исчезает.

 <script type="text/javascript" >
    $("#sortorder").change( function () {
    var option = $("#sortorder").val();
    if(option.toLowerCase() == "name"){
        alert("name");
    }
    });
</script>
 

Этот вариант не работает. Я выбираю опцию «имя» из списка выбора, и предупреждающее сообщение не отображается.

На самой странице, если я проверю выпадающий список, я получу следующее:

 <div class="nice-select" tabindex="0"><span class="current">Name</span><ul class="list"><li data-value="Name" class="option selected">Name</li><li data-value="Barcode" class="option">Barcode</li><li data-value="Price" class="option">Price</li></ul></div>
 

Этот «хороший выбор» взят из файла .css, который был включен в тему начальной загрузки, он явно не упоминается в файле, откуда взят приведенный выше код. Приведенному выше блоку предшествует фактический код в окне проверки элемента

 <select name="sortorder" id="sortorder" style="display: none;">
    <option selected="selected">Name</option>
    <option>Barcode</option>
    <option>Price</option>
</select>
 

Итак, две вещи: я не понимаю механизма, посредством которого элемент select дублируется этим классом, и кажется, что этот дублированный код — это то, что действительно можно использовать на сайте.
И как мне на самом деле взаимодействовать с рассматриваемым элементом?

Редактировать: я решил оставить это с промежуточным решением на данный момент. Я только что добавил кнопку, которая выполняет (часть) работу по извлечению значения списка выбора при нажатии.

     $(document).ready(function() { 

        $("#apply").on("click", () => {
        var sortType = $('#sortorder').val();
        
        if (sortType == 'Name') {
            $("#product-grid").load
            alert("sort by name");
        } else {
            $("#product-grid").load
            alert("sort by price");
        }

        });
    });
 

Для завершения, вот код, который не работает

     $(document).ready(function() { 
        /*$("#sortorder").niceSelect();
        $("#sortorder").on("change", () =>{
            
            var selected = $("#myselect").val();
            if (sortType == 'Name') {
                $("#product-grid").load
                alert("sort by name");
            } else {
                $("#product-grid").load
                alert("sort by price");
            }
        })*/