綁定和解除綁定事件jQuery

Question

我允許用戶在我的網站上更改字體大小，每次用戶點擊ID "Large" 1px被添加到字體中，並且同樣點擊"small" 1px被降低。

此外，用戶不允許點擊同一個按鈕兩次，所以我解開了該按鈕上的點擊事件，但可以點擊其他按鈕後點擊，這裏我使用綁定點擊事件，但它沒有'在解除綁定後似乎工作。

$("#large").on("click", function() { 
 
    $(this).unbind('click'); 
 
    $("#medium").bind('click'); 
 
    $("#small").bind('click'); 
 
    $("div").children().each(function() { 
 
     var size = parseInt($(this).css("font-size")); 
 
     size = size + 1 + "px"; 
 
     $(this).css({ 
 
      'font-size': size 
 
     }); 
 
    }); 
 

 
}); 
 

 
$("#medium").on("click", function() { 
 
    $(this).unbind('click'); 
 
    $("#large").bind('click'); 
 
    $("#small").bind('click'); 
 
    $("div").children().each(function() { 
 
     var size = parseInt($(this).css("font-size")); 
 
     size = size + 0 + "px"; 
 
     $(this).css({ 
 
      'font-size': size 
 
     }); 
 
    }); 
 
}); 
 

 
$("#small").on("click", function() { 
 
    $(this).unbind('click'); 
 
    $("#medium").bind('click'); 
 
    $("#small").bind('click'); 
 
    $("div").children().each(function() { 
 
     var size = parseInt($(this).css("font-size")); 
 
     size = size - 3 + "px"; 
 
     $(this).css({ 
 
      'font-size': size 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="" id="large">Large</a> 
 
<a href="" id="medium">Medium</a> 
 
<a href="" id="small">Small</a> 
 

 
    <div> 
 
     <p>Lorem ispsum dolor</p> 
 
     <h1>Lorem ispsum dolor Lorem ispsum dolor Lorem ispsum dolor</h1> 
 
     <h3>Lorem Ipsum</h3> 
 
    </div> 
 
    
 

 
     
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

這裏是小提琴：

https://jsfiddle.net/Nag/etsbapgu/

Answer 1

你的方法會導致巨大的代碼重複。更好的選擇是將字體差異存儲在data- *屬性中並綁定一次hanlder。然後檢查處理程序設置的前一個比較。

這將允許您在將來添加更多鏈接（比如超小型或特大型）而不用觸摸代碼。

$('[data-font]').click((function(current){ 
 

 
    return function(e) { 
 
    var $this = $(this), 
 
     font = parseInt($this.data('font')), 
 
     // remove previous diff and add new 
 
     diff = -current + font; 
 
      
 
    e.preventDefault(); 
 
      
 
    // same button click 
 
    if(current === font) return 
 
      
 
    // save for the next call 
 
    current = font; 
 
     
 
    $('div').children().css('font-size', function() { 
 
     return parseFloat($(this).css('font-size')) + diff + 'px'; 
 
    }) 
 
     
 
    } 
 
    
 
}(0)))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="" data-font="+3">Large</a> 
 
<a href="" data-font="0">Medium</a> 
 
<a href="" data-font="-3">Small</a> 
 

 
    <div> 
 
     <p>Lorem ispsum dolor</p> 
 
     <h1>Lorem ispsum dolor Lorem ispsum dolor Lorem ispsum dolor</h1> 
 
     <h3>Lorem Ipsum</h3> 
 
    </div>