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的短語法

回答

相關問題