Question

我有这个jquery函数但对我来说太长了。有没有办法制作一个jquery change函数。我需要你的帮助。

 $(document).ready(function () {
                $('.sub-cat select').change(function () {
                    if ($('.sub-cat select option:selected').text() == "Other") {
                        $('.sub-cat .other-category').show();
                    }
                    else {
                        $('.sub-cat .other-category').hide();
                    }
                });
                $('.prod-type select').change(function () {
                    if ($('.prod-type select option:selected').text() == "Other") {
                        $('.prod-type .other-category').show();
                    }
                    else {
                        $('.prod-type .other-category').hide();
                    }
                });
                $('.prod-finnish select').change(function () {
                    if ($('.prod-finnish select option:selected').text() == "Other") {
                        $('.prod-finnish .other-category').show();
                    }
                    else {
                        $('.prod-finnish .other-category').hide();
                    }
                });
                $('.prod-color select').change(function () {
                    if ($('.prod-color select option:selected').text() == "Other") {
                        $('.prod-color .other-category').show();
                    }
                    else {
                        $('.prod-color .other-category').hide();
                    }
                });
                $('.prod-included select').change(function () {
                    if ($('.prod-included select option:selected').text() == "Other") {
                        $('.prod-included .other-category').show();
                    }
                    else {
                        $('.prod-included .other-category').hide();
                    }
                });
                $('.prod-series select').change(function () {
                    if ($('.prod-series select option:selected').text() == "Other") {
                        $('.prod-series .other-category').show();
                    }
                    else {
                        $('.prod-series .other-category').hide();
                    }
                });
            });

Answer 1

为所有父元素分配一个公共类，即＆＃39; commonClass＆＃39; ，即＆＃39; sub-cat，prod-included，...＆＃39 ; ，然后使用各种DOM遍历方法来定位＆＃39;其他类别＆＃39; 元素。

学习使用this，启动活动的元素

$('.commonClass select').change(function () {
    $(this).closest('.commonClass').find('.other-category').toggle($('option:selected', this).text() == "Other");
});

参考

Answer 2

您可以使用逗号分隔他们的班级选择，一次选择多个元素。

$('.sub-cat, .prod-type, .prod-finnish, .prod-color, .prod-included, .prod-series').change(function() {
     var $this = $(this); // cache this so we don't have to wrap it twice
     $this.toggle($this.find('option:selected').text() == "Other"));
});

这只是使用.toggle()并传入布尔值的问题;在我们的例子中，所选选项是否以“其他”作为其文本。

这具有非常好的性能优势，因为您只需要一个事件委托来处理选择器中所有元素的change事件。

Answer 3

请检查以下代码。选择其他选项

＆＃13;

            $(document).ready(function () {

                $('select').change(function () {
                    if($(this).find('option:selected').text() == "other"){
                        $(this).next().show();
                    }
                    else{
                        $(this).next().hide();
                    }
                });

            });

＆＃13;

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    </head>
    <body>
        <div class="sub-cat">
            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                <option value="other">other</option>
            </select> 
            <div class="other-category" style="display: none;">
                <p>sub-cat other-category</p>
            </div>
        </div>
        <div class="prod-type">
            <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                <option value="other">other</option>
            </select> 
            <div class="other-category" style="display: none;">
                <p>prod-type other-category</p>
            </div>
        </div>

    </body>

</html>

＆＃13;

显示在div下面。

Answer 4

您可以利用数据属性来帮助您。我没有测试出这段代码，但我认为这样的东西可能会起作用。将您的HTML更新为此类

<select data-target="sub-cat"></select>
<div class="other-category" data-target="sub-cat"></div>

后面是这个缩写的jquery代码......

$(document).ready(function () {
    $('select').change(function() {
        var target = $(this).data('target'),
            isSelected = $(that).find('option:selected').text() == "Other";
        $(this).find('.other-category[data-target="'+target+'"]').toggleClass(isSelected);
    })
});

通过将属性存储在数据属性中，您可以轻松地在javascript代码中访问该属性，从而更轻松地定位特定元素。

如何优化此jquery脚本？不同的类和相同的功能

4 个答案: