Question

我有这个jQuery代码：

function showCreatedBy(){
        $(".created-by").css("background-color", "#949494");
        $(".date-time-data").hide();
        $(".reference-data").hide();
        $(".payment-status-data").hide();
        $(".created-by-data").show();
    }
    function showDateTime(){
        $(".date-time").css("background-color", "#949494");
        $(".created-by-data").hide();
        $(".reference-data").hide();
        $(".payment-status-data").hide();
        $(".date-time-data").show();
    }
    function showReference(){
        $(".reference").css("background-color", "#949494");
        $(".created-by-data").hide();
        $(".reference-data").show();
        $(".payment-status-data").hide();
        $(".date-time-data").hide();
    }
    function showPaymentStatus(){
        $(".payment-status").css("background-color", "#949494");
        $(".created-by-data").hide();
        $(".reference-data").hide();
        $(".payment-status-data").show();
        $(".date-time-data").hide();
    }

有没有办法使用jQuery来缩短它？我不太了解，但对我来说这似乎是多余的。

Answer 1

如果您可以更改功能的名称，可以将代码缩减为：

function showField(name) {
    $("." + name).css("background-color", "#949494");
    $.each(['created-by-data', 'reference-data', 'payment-status-data', 'date-time-data'], function(i, v) {
        $('.' + v).toggle((name + '-data') == v);
    });
}

showField('payment-status'); // Show only "payment-status"

// showField('created-by-data'); // Show only "created-by-data"

// etc.

Answer 2

一些指示：

使用addClass和removeClass代替直接分配CSS样式。允许您更改课程而无需触摸使用它的所有内容。

您可以创建变量以缩短选择器：

var $pmtStatus = jQuery(".payment-status");

或者您可以一次对多个项目执行操作：

$(".created-by-data, .reference-data").hide();

你可以做的其他事情 - 是拥有隐藏一切的功能，然后只显示你想要的东西。然后你不需要跟踪隐藏的内容。

function hideAll() {
    $(".date-time-data").hide();
    $(".reference-data").hide();
    $(".payment-status-data").hide();
    $(".created-by-data").hide();
}

function showPaymentStatus(){
    hideAll();
    $(".payment-status").css("background-color", "#949494");
    $(".payment-status-data").show();
}

jQuery更短的语法

2 个答案: