Question

说我有3个颜色的盒子，白色，黑色，蓝色。还有3种颜色的编辑器，白色，黑色，蓝色。

如果用户单击白色框，白色编辑器显示，则黑色和蓝色编辑器将隐藏。

如果用户单击黑框，黑色编辑器显示，则白色和蓝色编辑器隐藏。

我是这样用jQuery做的。

jQuery(document).ready(function(){        

    jQuery("#white").click(function() {
        jQuery(".editor_white").prop("disabled", false);
        jQuery(".editor_white").show();
        jQuery(".editor_black, .editor_blue").prop("disabled", true);
        jQuery(".editor_black, .editor_blue").hide();
    });

    jQuery("#black").click(function() {
        jQuery(".editor_black").prop("disabled", false);
        jQuery(".editor_black").show();
        jQuery(".editor_white, .editor_blue").prop("disabled", true);
        jQuery(".editor_white, .editor_blue").hide();
    });

});

我有很多颜色框和颜色编辑器，所以我必须使用上面的方法编写很长的代码。

有一种有效的方法吗？

Answer 1

将所有编辑框改为第二类，将它们全部隐藏，然后显示相应的

示例：假设您的第二堂课是＆＃39; .editor-box＆＃39;

jQuery(document).ready(function(){        

    jQuery("#white").click(function() {

        //Make sure this happens first
        jQuery(".editor-box").prop("disabled", true);
        jQuery(".editor-box").hide();

        //Show the appropriate box
        jQuery(".editor_white").prop("disabled", false);
        jQuery(".editor_white").show();

    });

    . . . // Rinse and repeat for the remaining selectors
});

如果你想更进一步，也可以给你的选择框一个类......然后保存颜色使用数据api在该元素上：示例：假设您的框中有一个名为＆＃39; .colour-box＆＃39;

的类

jQuery(document).ready(function(){        

    jQuery(".colour-box").click(function() {

        var colour = $(this).data('colour')

        //Make sure this happens first
        jQuery(".editor-box").prop("disabled", true);
        jQuery(".editor-box").hide();

        //Show the appropriate box
        jQuery(".editor_" + colour).prop("disabled", false);
        jQuery(".editor_" + colour).show();

    });

    . . . // The End - No need to repeat for the remaining selectors
});

这个第二种方法适用于任意数量的颜色，使用这个单一的事件处理程序在＆＃39; .colour-box＆＃39;类。

假设您有一个带有标签＆＃39; #white＆＃39;的按钮。例如

此：

<button id="#white" type="button">White</button>

......变成了这个：

<button class="colour-box" data-colour="white" type="button">White</button>

Jquery如何在Click事件上显示和隐藏多个元素

1 个答案: