0

大家好，我正在使用 j 查询进行前端开发，我是 js 的新手来编写可维护的 js，我的问题是有没有可能的方法为 html 中的每个元素编写单击事件函数，因为每次都在使用每个元素的 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 bindingsetc.. 缩小代码？因为每个 tym 我都需要写 id 名称或类名..！这是正确的写作方式还是有其他方式..？

4

2 回答 2

1

我会建议缓存 jQuery 返回的对象。从性能的角度来看它更好，也提高了可读性。例如，不要一次又一次地重复$('#forgot')你应该写：

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

使用这种方法，您可以将所有 jquery 引用放在代码的顶部。稍后，如果您决定切换到另一个库，则只需在一个地方进行更改。

于 2013-09-23T07:15:37.877 回答
1

您的重复次数非常少，您不必担心。

但是，您应该为每个链接注册一个单独的事件处理程序，从而允许您的浏览器直接将事件分派给正确的处理程序，而不是编写一系列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强调这是事件注册调用，而不是事件触发调用。

于 2013-09-23T08:14:58.857 回答