Question

我允许用户在我的网站中更改字体大小，每次用户点击ID "Large"时，1px都会添加到字体中，同样点击"small" 1px也会减少。

此外，用户不允许两次点击同一个按钮，因此我在该按钮上取消绑定点击事件，但是点击其他按钮后可以点击，这里我使用绑定点击事件，但它没有＆＃39在解开后似乎工作。

＆＃13;

$("#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
        });
    });
});

＆＃13;

<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 -->

＆＃13;

这是小提琴：

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

Answer 1

您的方法导致巨大的代码重复。更好的选择是将data diff存储在data- *属性中并绑定hanlder一次。然后只需检查处理程序的前一个差异设置。

这样您就可以在将来添加更多链接（比如Extra Small或Extra Large），而无需接触您的代码。

$('[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>

绑定和取消绑定事件jQuery

1 个答案: