jquery - If语句无法正常工作的jQuery问题

Question

我有以下代码：

$(document).ready(function(){

    $("[name=q58]").each(function (i) {
        $(this).click(function () {
            var selection = $(this).val();
            alert('Q58 Value = '+selection)
            if (selection == '1') {
                $("#region").show();

                $("[name=q59]").each(function (i) {
                    $(this).click(function () {
                        var selection = $(this).val();
                        alert('Q59 Value = '+selection)
                        if (selection == '1') {
                            $("#location").show();
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#east, #north, #scotland, #southeast, #southwest").hide();
                            $("#central").show();
                        }
                        else if (selection == '2') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #north, #scotland, #southeast, #southwest").hide();
                            $("#east").show();
                        }
                        else if (selection == '3') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #scotland, #southeast, #southwest").hide();
                            $("#north").show();
                        }
                        else if (selection == '4') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #southeast, #southwest").hide();
                            $("#scotland").show();
                        }
                        else if (selection == '5') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southwest").hide();
                            $("#southeast").show();
                        }
                        else if (selection == '6') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southeast").hide();
                            $("#southwest").show();
                        }
                        else {
                            $("#location").hide();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southeast, #southwest").hide();
                        }             
                    });
                });

            }
            else if (selection == '10') {
                $("input:radio[name^='central-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='east-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='north-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='scotland-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southeast-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southwest-']").each(function(i) {
                       this.checked = false;
                });
                $("#central, #east, #north, #scotland, #southeast, #southwest").hide();
                $("#location").hide();
                $("#region").show();
            }
            else {
                $("input:radio[name^='q59']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='central-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='east-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='north-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='scotland-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southeast-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southwest-']").each(function(i) {
                       this.checked = false;
                });
                $("#region").hide();
                $("#location").hide();
                $("#central").hide();
            }             
        });
    });




});

在 JsFiddle 中工作，或者说不工作，示例：参见 JsFiddle 中的示例：http: //jsfiddle.net/ExPUu/1/

出现以下奇怪行为：

用户选择Aftersales，然后他们看到q59并可以选择Central或East然后看到q60并选择另一个选项。这工作正常。

如果用户选择Bus, Coach and Engines他们不会得到任何进一步的选项 - 再次工作正常。

奇怪的行为是当用户选择Sales如果他们选择了这个，他们应该能够然后选择Central或者East- 如果他们点击了Sales，没有别的，这工作正常。 但是，如果他们选择Aftersales然后改变主意并选择Sales然后选择Central或者East- 它然后显示q60并且它不应该。

我一直在查看我的 jQuery 代码，但看不到我哪里出错了。或者这是一个奇怪的现象？

Answer 1

问题出在事件绑定的情况下AfterSales，您将单击事件绑定到 q59。因此，当用户Sales从 q59 中选择并选择某些内容时，点击处理程序就会执行。这是导致问题的一段代码：

$("[name=q59]").each(function (i) {
  $(this).click(function () { ...

您可以通过取消绑定事件或使用事件内部的某些条件来检查是否AfterSales被选中来避免这种情况Sales。

解除绑定使用

$("[name=q59]").each(function (i) {
                $(this).unbind('click');
                });

在其他部分。

见工作小提琴

Answer 2

您的代码出现了一些逻辑问题，我在下面尝试修复......

$(文档).ready(函数(){

    $("[name=q58]").each(function (i) {
        $(this).click(function () {
            var selection = $(this).val();
            alert('Q58 Value = '+selection)
            if (selection == '1') {
                $("#region").show();

                $("[name=q59]").each(function (i) {
                    $(this).click(function () {
                        var selection = $(this).val();
                        alert('Q59 Value = '+selection)
                        if (selection == '1') {
                            if($("[name=q58]:checked").val() == 1){
                            $("#location").show();
                            }

                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#east, #north, #scotland, #southeast, #southwest").hide();
                            if($("[name=q58]:checked").val() == 1){
                                $("#central").show();
                            }
                        }
                        else if (selection == '2') {

                            if($("[name=q58]:checked").val() == 1){
                            $("#location").show();
                            }
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #north, #scotland, #southeast, #southwest").hide();
                            if($("[name=q58]:checked").val() == 1){
                                $("#east").show();
                            }
                        }
                        else if (selection == '3') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #scotland, #southeast, #southwest").hide();
                            $("#north").show();
                        }
                        else if (selection == '4') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #southeast, #southwest").hide();
                            $("#scotland").show();
                        }
                        else if (selection == '5') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southwest").hide();
                            $("#southeast").show();
                        }
                        else if (selection == '6') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southeast").hide();
                            $("#southwest").show();
                        }
                        else {
                            $("#location").hide();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southeast, #southwest").hide();
                        }             
                    });
                });

            }
            else if (selection == '10') {
                $("input:radio[name^='central-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='east-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='north-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='scotland-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southeast-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southwest-']").each(function(i) {
                       this.checked = false;
                });
                $("#central, #east, #north, #scotland, #southeast, #southwest").hide();
                $("#location").hide();
                $("#region").show();
            }
            else {
                $("input:radio[name^='q59']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='central-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='east-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='north-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='scotland-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southeast-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southwest-']").each(function(i) {
                       this.checked = false;
                });
                $("#region").hide();
                $("#location").hide();
                $("#central").hide();
            }             
        });
    });




});

58.您在哪个领域工作： 售后 巴士，客车和发动机 销售

    <div class="row" style="display:none;" id="region">
    <div class="col1">
        59.
    </div>
    <div class="col2a width400">
        In which Region do you work:        </div>
    <div class="direct2">
        <table style="table2">
            <tr id="trr1" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="q59" value="1" id="q591" type="radio"/></td>
                    <td class="td3"><label for="q591"> <b>Central</b></label></td>
                </tr><tr id="trr2" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="q59" value="2" id="q592" type="radio"/></td>
                    <td class="td3"><label for="q592"> <b>East</b></label></td>
                </tr>       </table>
    </div>
    </div>

    <div class="row" style="display:none;" id="location">
    <div class="col1">
        60.
    </div>
    <div class="col2a width400">
        In which Location do you work:      </div>
    <div class="direct2" style="display:none;" id="central">
        <table style="table2">
            <tr id="trlc1" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="central-q60" value="1" id="q601" type="radio"/></td>
                    <td class="td3"><label for="q601"> <b>Customer Operations</b></label></td>
                </tr><tr id="trlc2" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="central-q60" value="2" id="q602" type="radio"/></td>
                    <td class="td3"><label for="q602"> <b>Parts</b></label></td>
                </tr><tr id="trlc3" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    </table>
    </div>
    <div class="direct2" style="display:none;" id="east">
        <table style="table2">
            <tr id="trle5" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="east-q60" value="5" id="q605" type="radio"/></td>
                    <td class="td3"><label for="q605"> <b>Boston</b></label></td>
                </tr><tr id="trle6" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="east-q60" value="6" id="q606" type="radio"/></td>
                    <td class="td3"><label for="q606"> <b>Doncaster VMU</b></label></td>
                </tr><tr id="trle7" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                                </table>
    </div>