как уменьшить строки JavaScript вместо повторения

Question

как уменьшить строки JavaScript вместо повторения

0

Привет всем я использую 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 мне нужно написать имена имен или имена классов..! это то, что можно написать или есть какой-то другой способ...?

Alnitak 23 сен. 2013, в 10:09

Источник

Теги:

javascript

jquery

2 ответа

Ещё вопросы

Alnitak · Answer 1 · 2013-09-23T06-45-00.000Z

Количество повторений, которое у вас есть, настолько невелико, что вы не должны беспокоиться об этом.

Однако вам нужно зарегистрировать отдельный обработчик событий для каждой ссылки, что позволит вашему браузеру отправлять события непосредственно правообладателям вместо того, чтобы писать целую серию 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 чтобы подчеркнуть, что это вызов регистрации события, а не вызов триггера события.

Krasimir · Answer 2 · 2013-09-23T04-37-00.000Z

Я предлагаю кэшировать объекты, возвращаемые jQuery. Это лучше с точки зрения производительности, а также улучшает читаемость. Например, вместо повторения $ ('# forget') снова и снова вам следует написать:

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

Используя этот подход, вы можете поместить все jquery-ссылки в начало вашего кода. Позже, если вы решите переключиться на другую библиотеку, вам придется вносить изменения только на одном месте.