0

ページには、設定をアクティブ化および非アクティブ化するボタンがあります。Id は同じバーのプレフィックスです。たとえば、「#rl-activate」、「#rl-deactivate」、「#cl-activate」、「#cl-deactivate」があります。このコードをリファクタリングする方法はありますか?ページ上のすべてのボタンに対してそれを行います。

// rl activate
$('#rl-activate').click(function(){
  $('#rl-activate').hide();
  $('#rl-deactivate').show();
  $('#rl').val(50).prop('selected', true);
  $('#rl').prop('disabled', false).trigger('liszt:updated');
  displayCPM();
  newPrice();
  checkSettings();
});

// rl deactivate
$('#rl-deactivate').click(function(){
    $('#rl-deactivate').hide();
    $('#rl-activate').show();
    $('#rl').prop('disabled', true).trigger('liszt:updated');
    $('#rl').val('').trigger('liszt:updated');
    displayCPM();
    newPrice();
    checkSettings();
});

したがって、次のものでは、変更されるのは rl から cl から bm などだけです。

4

2 に答える 2

2

あなたはこれを行うことができます ：

$('[id$="-activate"]').click(function(){
  var prefix = this.id.slice(0,2);
  $(this).hide();
  $('#'+prefix+'-deactivate').show();
  $('#'+prefix).val(50).prop('selected', true);
  $('#'+prefix).prop('disabled', false).trigger('liszt:updated');
  displayCPM();
  newPrice();
  checkSettings();
});

$('[id$="-deactivate"]').click(function(){
    var prefix = this.id.slice(0,2);
    $(this).hide();
    $('#'+prefix+'-activate').show();
    $('#'+prefix).prop('disabled', true).trigger('liszt:updated');
    $('#'+prefix).val('').trigger('liszt:updated');
    displayCPM();
    newPrice();
    checkSettings();
});

これは、「属性の末尾」セレクターを使用します。

別の解決策は、クラス ("activate"、"deactivate") とデータ属性 ("cl"、"rl") を使用するように HTML を変更することでした。

于 2013-11-06T09:27:18.350 に答える
1

DRY 原則に従って、コードの一部を共通の関数に分解し、jQuery が独自のコードで多く使用する複製スタイルを使用し、jQuery チェーンをもう少し活用することができます。

 function clickCommon(itemToHide, itemToShow) {
    $(itemToHide).hide()
    $(itemToShow).show();
    displayCPM();
    newPrice();
    checkSettings();
 }

 ["#rl", "#cl"].each(function(pref) {

     $(pref + "-activate").click(function() {
         clickCommon(this, pref + "-deactivate");
         $(pref).val(50).prop('selected', true)
            .prop('disabled', false).trigger('liszt:updated');
     });

     $(pref + "-deactivate").click(function() {
         clickCommon(this, pref + "-activate");
         $(pref).prop('disabled', true).trigger('liszt:updated');
             .val('').trigger('liszt:updated');
     });
 });

使用されたテクニック:

  1. アクティブ化クリックと非アクティブ化クリックの間の共通コードを共通関数に組み込む
  2. 配列からプレフィックスを反復するために使用します.each()(jQuery は、実装の内部でこれを頻繁に行います)。
  3. this現在の要素を再検索するのではなく、可能な場合に使用する
  4. 各プレフィックスのコードでアクティブ化および非アクティブ化 ID 値を作成します
  5. 共通の jQuery セレクターで呼び出されるすべてのメソッドに jQuery チェーンを使用する
于 2013-11-06T09:32:59.987 に答える