jQuery的短语法

-4

我有这样的jQuery代码：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？我不明白很多，但这对我来说似乎真的是多余的。

来源

2016-10-04 Adam Silva

http://codereview.stackexchange.com/ – j08691

每个功能都做不同的事情，于不同的东西，所以没有，有没有什么可以做，使之更加简洁。 –

'$（“。created-by-data，.reference-data，.date-time-data”）。hide（）;' – Pointy

如果你可以改变的函数的名称，你可以将代码减少到这样的事情：

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.

来源

2016-10-04 15:03:05

即使更改方法名称不是选项，也可以定义'function showPaymentStatus（）{showField（'payment-status'）; ''等等。 –

可能您可能需要更改行$（'。'+ v）.toggle（name == v）; to（'。'+ v）.toggle（（name +'-data'）== v）; – Karpak

@卡尔帕克，对，我已经更新了答案。 –

几个要点：

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

来源

2016-10-04 15:04:11

jQuery的短语法

回答

相关问题