Предотвратить повторение subloop в JQuery

Question

Я пытаюсь создать простой веб-инструмент с использованием jQuery.Я новичок в использовании jQuery, так что не смейтесь ;-).Он должен показывать автомобиль на основе меню выбора, а для каждого автомобиля он должен показывать и скрывать тонированные окна, нажимая на окна.Это все работает, но после переключения автомобилей функция показа и скрытия выбранных окон повторяется при нажатии (показать / скрыть / показать / скрыть) после повторного нажатия на них.

Чем больше вы переключаетесь в опциях выбора, тем больше оно повторяется.Как я могу предотвратить это повторение?

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

<div id='tintbuilder-container'>

        <div id='carselector'>
                <h3 style='color:#FFF'><center>Voertuigselectie:</center></h3><br>
                <form class='selectcar'>
                     <select id='carselection' name='typecar'>
                        <option value=''>Selecteer je auto</option>
                        <option value='sedan'>Sedan</option>
                        <option value='station'>Station</option>
                        <option value='hatchback'>Hatchback</option>
                        <option value='coupe'>Coupe</option>
                        <option value='overig'>Overig</option>
                    </select>
                </form>
        </div>


        <script>
        jQuery(document).ready(function($){
        var carlist = [ "sedan", "station", "hatchback", "coupe", "else" ];
        jQuery.each( carlist, function( i, val, list ) {
            $('#carselection').change(function () {
                    $('.hidecar').hide()
                    $('#' + this.value).show();
          $("#tintbuilder-container").append("<div style='display:none;' id='"+ val + "' class='car hidecar'><div class='selectionlist'></div>"
        + "<div class='selectionprice'>Huidige selectie: &euro;<span class='"+ val + "price'>0</span>"
        + "<div><h3>Selectie</h3><ul class='" + val + "list'><ul></div></div>");

        var win = [ val + "rearwindow", val + "quarterwindow", val + "reardoorwindow", val + "frontdoorwindow" ];

        jQuery.each( win, function( i, win ) {
        $("#"+val+"").append("<a><div id='"+win+"-container'><div class='tint' id='" + win + "'></div></div></a>");
         $("#"+val+"").on("click", "#"+ win +"-container", function() {
             if( $("li").is("."+ win + "listitem") ) { $("."+ win + "listitem").remove();}
             else { $("." + val + "list").append($("<li class='" + win + "listitem'>" + win + "</li>"));}
             $count = $("."+ val + "price");
             var $this = $(this);
             $("#"+ win +"").fadeToggle();
             if ($("."+ win + "on")[0]){
             $this.removeClass(""+ win + "on");
             $count.text(function(idx, txt) { return +txt - 200;})
             } else {
             $this.addClass(""+ win + "on");
             $count.text(function(idx, txt) { return +txt + 200;})
         }
        });
        });
        });
        });
        });
        </script>

Редактировать: вот кодекс: https://codepen.io/Dutchlimits/pen/pmXKRK

Answer 1

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

 $("#tintbuilder-container").append("<div style='display:none;' id='"+ val + "' class='car hidecar'><div class='selectionlist'></div>"
        + "<div class='selectionprice'>Huidige selectie: &euro;<span class='"+ val + "price'>0</span>"
        + "<div><h3>Selectie</h3><ul class='" + val + "list'><ul></div></div>");

Что означает, что когда вы меняете автомобиль, на самом деле у вас дважды появляются окна, а также элемент «скрытая машина» и элемент «низкая цена».Вы продолжаете добавлять больше каждый раз, когда вы меняете автомобили.Так что функция срабатывает дважды, потому что теперь у вас есть больше.Так что после того, как вы переключитесь один раз:

 $("#tintbuilder-container").append("<div style='display:none;' id='"+ val + "' class='car hidecar'><div class='selectionlist'></div>"
    + "<div class='selectionprice'>Huidige selectie: &euro;<span class='"+ val + "price'>0</span>"
    + "<div><h3>Selectie</h3><ul class='" + val + "list'><ul></div></div>");

и

$("#"+val+"").append("<a><div id='"+win+"-container'><div class='tint' id='" + win + "'></div></div></a>");

Сработает снова, потому что теперь у вас есть 2 $("#"+val+"").on.Каждый раз, когда вы меняете автомобиль, потому что вы только добавляете, а не удаляете, вы получаете еще одну ссылку с этим идентификатором, так что она срабатывает в течение дополнительного времени.

Просто запустите его в коде, и вы увидите, что вы продолжаете добавлять ссылки в окнах.и элементы div.hidecar, которые вызывают вашу повторяющуюся проблему.

На смене автоселектора у вас есть:

$('.hidecar').hide()
$('#' + this.value).show();

С тех пор, как вы сменили автомобиль, вы добавили еще один: $('#' + this.value) и $('.hidecar') Youполучить еще один повтор.Эти селекторы теперь выбирают две вещи после того, как вы меняете машины один раз, затем 3 вещи после 2 и т. Д.

Поэтому вам нужно проверить, прежде чем продолжать добавление, чтобы увидеть, есть ли эти div, уже есть, и вместо этого изменить то, что вих или просто проверьте, если они есть, и удалите их, прежде чем добавить то, что у вас есть.

РЕДАКТИРОВАТЬ :

Хорошо, так что я на самом деле возвращаюсь к тому, что я сначала сказал,Извините, что проверка, которую я оставил, не сработала, и это потому, что оператор if не сработал.

Однако вот ответ, который останавливает увеличение ваших div'ов, что решает как окна, так и скрытие / показ автомобиля.

Просто выньте функцию изменения выбора каретки из цикла настройки, чтобы она не добавлялась больше при каждой смене машины:

        $('#carselection').change(function () {
                $('.hidecar').hide()
                $('#' + this.value).show();
        });

Просто поместите это прямо выше: jQuery.each( carlist, function( i, val, list ) { Тогдаудалите лишние }); внизу вашего js, потому что теперь у вас есть эта функция изменения, закрывающаяся выше.

Как видно здесь: https://codepen.io/ekr990011/pen/wbVVjB