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());
            });
     });

将onchange和onclick绑定在一起jQuery不起作用

1 个答案: