代码之家 › 专栏 › 技术社区 › Nag

绑定和取消绑定事件jQuery

bind jquery javascript

-2

Nag · 技术社区 · 8 年前

我允许用户每次点击id时更改我网站的字体大小 "Large" "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/

1 回复 | 直到 8 年前

Yury Tarabanko 8 年前

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

这将允许您在将来添加更多的链接(比如说非常小或非常大),而不需要触摸您的代码。

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