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ます。これはうまくいきます。Eastq60

ユーザーがBus, Coach and Enginesそれ以上のオプションを取得しないことを選択した場合、再び正常に動作します。

奇妙な動作は、ユーザーがSalesこれを選択した場合に選択すると、選択できるはずです。CentralまたはEast、クリックSalesして他に何もない場合、これは正常に機能します。 しかし、彼らが選択Aftersalesしてから気が変わって選択してから、またはSalesいずれかを選択しCentralた場合East、それは表示されますが、表示さq60れるべきではありません。

私は自分のjQueryコードを調べてきましたが、どこが間違っているのかわかりません。それともこれは異常ですか？

Answer 1

問題はイベントバインディングにAfterSalesあります の場合、クリックイベントをq59にバインドしています。したがって、ユーザーがSalesq59 から何かを選択して選択すると、クリック ハンドラーが実行されます。これは、問題の原因となっているコードです。

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

これを回避するには、イベントのバインドを解除するか、イベント内で何らかの条件を使用して、選択されているかAfterSales選択されているかを確認しSalesます。

バインドを解除するには

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

他の部分で。

作業フィドルを参照してください

Answer 2

あなたのコードは論理的な問題を抱えています。以下で修正してみてください......

$(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') {
                            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>