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

实际上，一旦您换了车，实际上意味着您有两次窗户，同时还有hidecar div和slectionprice 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。每次切换汽车是因为您仅添加而没有删除，您会获得具有该ID的另一个链接，因此会触发额外的时间。

只需在Codepen中运行它，您就会看到不断添加窗口链接和div.hidecar元素，这会引起重复的问题。

在汽车选择器上进行更改时，您具有：

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

自从您更换汽车以来，您添加了另一个： $('#' + this.value) 和 $('.hidecar') 您会得到另一个重复。现在，这些选择器在您一次更换汽车后选择了两项，然后在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

防止子循环在jQuery中重复

1 个答案: