javascript - 将 onchange 和 onclick 绑定(bind)在一起 jQuery 不起作用

Question

在选择更改时，我显示了一些 div 并隐藏了其他 div，我也试图通过点击来处理同样的情况。它在选择更改时工作正常但在点击时不起作用。这是我的代码，尝试选择第二个选项，因为它添加了条件检查

编辑:这里是 JSfiddle link还有

$(document).ready(function() {
    var option1 = $(".option1-wrapper");
    var option2 = $(".option2-wrapper");
    var option3 = $(".option3-wrapper");
    var option4 = $(".option4-wrapper");

    $('.tier3-wrapper, #option-selection').on('click change', function(e) {
        if (e.type === 'change' || this.id !== 'fund-selection') {
            $("select option:selected, .header").each(function() {
                if ($(this).attr("value") == "Option One") {
                    option1.removeClass('hidden');
                    option2.removeClass('hidden');
                    option3.removeClass('hidden');
                    option4.removeClass('hidden');
                }
                if ($(this).attr("value") == "Option Two" && $('a.header:contains("Option One")')) {
                    option1.removeClass('hidden');
                    option2.addClass('hidden');
                    option3.addClass('hidden');
                    option4.addClass('hidden');
                }
                if ($(this).attr("value") == "Option Three") {
                    option1.addClass('hidden');
                    option2.removeClass('hidden');
                    option3.addClass('hidden');
                    option4.addClass('hidden');
                }
                if ($(this).attr("value") == "Option Four") {
                    option1.addClass('hidden');
                    option2.addClass('hidden');
                    option3.removeClass('hidden');
                    option4.addClass('hidden');
                }
                if ($(this).attr("value") == "Option Five") {
                    option1.addClass('hidden');
                    option2.addClass('hidden');
                    option3.addClass('hidden');
                    option4.removeClass('hidden');
                }
            });
        }

    });
});

.hidden {
            display: none;
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tier3-wrapper">
        <a class="header" href="#" target="_self">Option One</a>
    </div>
    <div class="tier3-wrapper">
        <a class="header" href="javascript:;" target="_self">Option Two</a>
    </div>
    <div class="tier3-wrapper">
        <a class="header" href="javascript:;" target="_self">Option Three</a>
    </div>
    <div class="tier3-wrapper">
        <a class="header" href="javascript:;" target="_self">Option Four</a>
    </div>
    <div class="tier3-wrapper">
        <a class="header" href="javascript:;" target="_self">Option Five</a>
    </div>
    <select class="form-control" id="option-selection">
        <option value="Option One">Option One</option>
        <option value="Option Two">Option Two</option>
        <option value="Option Three">Option Three</option>
        <option value="Option Four">Option Four</option>
        <option value="Option Five">Option Five</option>
    </select>
    <div class="option1-wrapper">
        <h1>Option 1</h1>
    </div>
    <div class="option2-wrapper">
        <h1>Option 2</h1>
    </div>
    <div class="option3-wrapper">
        <h1>Option 3</h1>
    </div>
    <div class="option4-wrapper">
        <h1>Option 4</h1>
    </div>

Answer 1

我可以为您提供以下更改。它将显示/隐藏的逻辑保留在一个函数中，但拆分了事件。

$(document).ready(function () {
            var option1 = $(".option1-wrapper");
            var option2 = $(".option2-wrapper");
            var option3 = $(".option3-wrapper");
            var option4 = $(".option4-wrapper");

            function exec(name) {
             if (name == "Option One") {
                            option1.removeClass('hidden');
                            option2.removeClass('hidden');
                            option3.removeClass('hidden');
                            option4.removeClass('hidden');
                        }
                        if (name == "Option Two" && $('a.header:contains("Option One")')) {
                            option1.removeClass('hidden');
                            option2.addClass('hidden');
                            option3.addClass('hidden');
                            option4.addClass('hidden');
                        }
                        if (name == "Option Three") {
                            option1.addClass('hidden');
                            option2.removeClass('hidden');
                            option3.addClass('hidden');
                            option4.addClass('hidden');
                        }
                        if (name == "Option Four") {
                            option1.addClass('hidden');
                            option2.addClass('hidden');
                            option3.removeClass('hidden');
                            option4.addClass('hidden');
                        }
                        if (name == "Option Five") {
                            option1.addClass('hidden');
                            option2.addClass('hidden');
                            option3.addClass('hidden');
                            option4.removeClass('hidden');
                        }
            }

            $('#option-selection').on('change', function (e) {
                if (e.type === 'change' || this.id !== 'fund-selection') {
                    $("select option:selected, .header").each(function () {
                       exec($(this).attr("value"));
                    });
                }

            });

            $('.tier3-wrapper a').on('click', function (e) {
                       //exec($(this).child('a').text());
                       exec($(this).text().trim());
            });
     });