更好的方式來點擊添加/刪除類

當你點擊它們改變一些內容（「#live」）和（「#paid」）的可見性時，我有兩個鏈接，「.sp」和「.sl」我猜想一個低級別的標籤界面。如果有，請在點擊時添加一個「有效」類別，並移除其他鏈接上的課程。對於這樣一個小功能，這似乎有點臃腫，有沒有更好的方法來寫這個？更好的方式來點擊添加/刪除類

$(function() { 
    $('#live').hide(); 
    $('.sp').click(function() { 
     $(this).addClass('active'); 
     $('#paid').show(); 
     $('#live').hide(); 
     $('.sl').removeClass('active'); 
    }); 
    $('.sl').click(function() { 
     $(this).addClass('active') 
      $('#live').show(); 
      $('#paid').hide(); 
      $('.sp').removeClass('active'); 
    }); 
});

來源

2012-02-01 Dirty Bird Design

我會建議一個實用功能，可以爲你做共同的工作，被稱爲兩個地方。

$(function() { 
    function clickCommon(current, newItem, oldItem, deactive) { 
     $(current).addClass('active'); 
     $(newItem).show(); 
     $(oldItem).hide(); 
     $(deactive).removeClass('active');  
    } 

    $('#live').hide(); 
    $('.sp').click(function() { 
     clickCommon(this, "#paid", "#live", ".sl"); 
    }); 
    $('.sl').click(function() { 
     clickCommon(this, "#live", "#paid", ".sp"); 
    }); 
});

來源

2012-02-01 04:13:56 jfriend00

剛剛看到這個，它比上面的那個好嗎？似乎有點多一點工作？ – 2012-02-01 04:15:11

這是一個你喜歡的個人喜好。我認爲這是幾行代碼，但是如果你不僅僅只有.sp和.sl參與邏輯，那麼它會更直接一些，並且可以稍微擴展一些。要麼在實踐中運作良好。我常常想當人們使用這些匿名函數時，他們往往忘記了通用代碼可以被分解成一個通用函數並在多個地方使用，所以我認爲值得分享這個選項。 – jfriend00 2012-02-01 04:19:58

非常好的一點，在最後重新使用代碼是更有效的，即使我不得不多寫一點。謝謝！ – 2012-02-01 04:22:49

試試這個。

$(function() { 
    $('#live').hide(); 
    var $links = $('.sp, .sl').click(function() { 
     $links.removeClass('active'); 
     var isSp = $(this).addClass('active').hasClass('sp'); 
     $('#paid').toggle(isSp); 
     $('#live').toggle(!isSp); 
    }); 
});

來源

2012-02-01 04:06:09 ShankarSangoli

+1，同樣的思維過程。 – 2012-02-01 04:07:25

@ShankarSangoli今天兩次。你很不好的屁股。 Thx再次男人。 – 2012-02-01 04:13:46

更好的方式來點擊添加/刪除類

回答

相關問題