Question

大家好我正在使用j查询进行前端开发我是js的新手写一个可维护的js我的问题是有没有任何可能的方法为html中的每个元素编写单击事件函数因为evey时间我正在使用id每个元素。像这样。

html

<a id="get-in" class="">Login
  <div class="log-n-contanier">
      <form id="login">
      <input type="text" placeholder="Email Address" />
         <br>
        <input type="password" placeholder="Password" />
         <br>
<button class="btn blue med large" id="login-trigger">LOGIN</button>
<span id="forgot-trigger">forgot password?</span>
</form>
<form id="forgot">
 <input type="text" placeholder="Email Address" />
        <br>
    <button class="btn blue med large">Send Instructions</button>
    <span id="cancel-trigger">cancel</span>
    </form>
    </div>
</a>

$('button, a').click(function(){
     ids=$(this).attr('id');
     if(ids=='get-in'){

        $('.log-n-contanier').show();
        $(this).addClass('active');
     }
        else if(ids=='login-trigger')
        {
            alert('you were loggging');
        }
        else if(ids=='forgot-trigger'){
            $('#login').hide();
            $('#forgot').show();
        }
        else if(ids=='cancel-trigger'){
            $('#forgot').hide();
            $('#login').show();
        }
        else{
            alert('over');
        }
     });

如何使用event bindings等缩小代码..？因为每个tym我需要写id名称或类名..！是写的正确还是有其他方式..？

Answer 1

我建议缓存jQuery返回的对象。从性能的角度来看，它更好，并且还提高了可读性。例如，不要一次又一次地重复 $（'＃forgot'），而应该写：

var forgotButton = $('#forgot');
...
forgotButton.hide();

使用此方法，您可以将所有jquery-referencing放在代码的顶部。稍后，如果您决定切换到另一个库，则必须仅在一个地方进行更改。

Answer 2

你所拥有的重复量非常小，你不必担心它。

但所做的是为每个链接注册一个单独的事件处理程序，从而允许您的浏览器直接将事件分派给正确的处理程序，而不是编写一整套if (id === ...)分支：

$('#get-in').on('click', function(){
    $('.log-n-contanier').show();
    $(this).addClass('active');
});

$(#'login-trigger').on('click', function() {
    alert('you were loggging');
});

$('#forgot-trigger').on('click', function() {
    $('#login').hide();
    $('#forgot').show();
});

$('#cancel-trigger').on('click', function() {
    $('#forgot').hide();
    $('#login').show();
});

不要担心重构任何这些，除非函数内的重复变得笨拙。

另请注意，我始终使用.on('click', ...)而不是.click来强调这是一个事件注册调用，而不是事件触发器调用

如何减少javascript线而不是重复

2 个答案: