Нажмите функцию, работающую на jquery.click?

0

Я пытаюсь создать функцию переключения между отображением и скрытием элементов. Вот мой код:

$(document).ready(function() {
     (...) Code for forms (...)
     $("#hide").click( HideAll() );
}

function HideAll() {
    $("#course").hide();
    $("#students").hide();
    $("#hide").text("Show course");
    $("#hide").unbind().click(ShowAll());
}

function ShowAll() {
    $("#course").show();
    $("#students").show();
    $("#hide").text("Hide course");
    $("#hide").unbind().click(HideAll());
}  

С HTML структурировано так:

<div id="hide">Hide courses</div>
<ul id="course">
    <li><div>CRN:</div><input type="text" id="crn" value="" size="5"/></li>
    <li><div>Prefix:</div><input type="text" id="pre" maxlength="4" value="" size="4"/></li>
    <li><div>Number:</div><input type="text" id="num" maxlength="4" value=""size="4" /></li>
    <li><div>Title:</div><input type="text" id="title" value="" /></li>
    <li><div>Section:</div><input type="text" id="sec" maxlength="2" value=""size="2" /></li>
    <li><div>Year:</div><input type="text" id="year" maxlength="4" value="" size="4"/></li>
</ul>

<div id="students">
    <ul class="student">
        <li><div>RIN:</div><input type="text" class="rin" maxlength="9" value="" size="9"/></li>
        <li><div>First Name:</div><input type="text" class="fname" value="" size="12"/></li>
        <li><div>Last Name:</div><input type="text" class="lname" value="" size="12"/></li>
        <li><div>Address line 1:</div><input type="text" class="ad1" value="" /></li>
        <li><div>Address line 2:</div><input type="text" class="ad2" value="" /></li>
        <li><div>City:</div><input type="text" class="city" value="" /></li>
        <li><div>State:</div><input type="text" class="st" maxlength="2" value="" size="2"/></li>
        <li><div>ZIP:</div><input type="text" class="zip" maxlength="5" value="" size="5"/><input type="text" class="zip4" maxlength="4" value="" size="4"/></li>
        <li><div>Grade:</div><input type="text" class="grade" maxlength="3" value="" size="3"/></li>
    </ul>
</div>

Что касается точек останова в моем скрипте, мне показалось, что моя функция щелчка #hide вызывается в строке функции $ (document).ready, тогда это непрерывные циклы, не дожидаясь кликов. Есть ли проблема с моей реализацией или ошибка с моим кодом? Я не совсем понял это.

В случае, если это помогает, вот столбец, когда вызывается функция #hide click:

DOMContentLoaded  
$.extend.ready
$.Callbacks.self.fireWith
$.Callbacks.fire
(anonymous function) 

Спасибо за ваше время.

Теги:

5 ответов

1
Лучший ответ

Вам нужно передать ссылки на функцию щелчка

$("#hide").click( HideAll);

тогда

$("#hide").off('click').click(ShowAll);

Но лучшим решением может быть использование.one()

$(document).ready(function () {
    $("#hide").one('click', HideAll);
}

function HideAll() {
    $("#course").hide();
    $("#students").hide();
    $("#hide").text("Show course");
    $("#hide").one('click', ShowAll);
}

function ShowAll() {
    $("#course").show();
    $("#students").show();
    $("#hide").text("Hide course");
    $("#hide").one('click', HideAll);
}
  • 0
    спасибо, что не распространяете использование bind .
1

Если бы я мог предложить другую рекомендацию:

$(document).ready(function() {
    var $hide = $('#hide'),
        $courseStudents = $('#course,#students'),
        hideShow = {
            show:true,
            apply:function() {
                var self = this;

                if(self.show){
                    self.show = false;
                    $courseStudents.hide();
                    $hide.text("Show course");
                } else {
                    self.show = true;
                    $courseStudents.show();
                    $hide.text("Hide course");
                }
            }
        };

    (...) Code for forms (...)

    $hide.on('click',hideShow.apply());
});

Это объединяет ваш код в объект hideShow с булевым show которое определит, какая серия событий происходит. При щелчке #hide он переключит логическое значение и применит соответствующие функции. Это позволяет сэкономить вдвое писать два одинаковых кода и инкапсулировать все, чтобы не было фрагментации логики.

  • 0
    Возможно, было бы разумно поместить все это в document.ready (), так как элементы могут еще не существовать на момент установки этих переменных.
  • 0
    @Moob - действительная точка, обновлена.
0

Использовать .one()

Прикрепите обработчик к событию для элементов. Обработчик выполняется не более одного раза для каждого элемента для каждого типа события.

$(document).ready(function() {
    // (...) Code for forms (...)
     $("#hide").one('click', HideAll());
}

function HideAll() {
    $("#course").hide();
    $("#students").hide();
    $("#hide").text("Show course");
    $("#hide").one.('click',ShowAll());
}

function ShowAll() {
    $("#course").show();
    $("#students").show();
    $("#hide").text("Hide course");
    $("#hide").one('click', HideAll());
}
0

Вам необходимо передать функции в качестве ссылок:

$(document).ready(function() {
     //(...) Code for forms (...)
     $("#hide").click(HideAll);
}

function HideAll() {
    $("#course").hide();
    $("#students").hide();
    $("#hide").text("Show course");
    $("#hide").unbind().click(ShowAll);
}

function ShowAll() {
    $("#course").show();
    $("#students").show();
    $("#hide").text("Hide course");
    $("#hide").unbind().click(HideAll);
}  

Ваш текущий код немедленно вызывает каждую функцию и присваивает результат соответствующему обработчику click, который заканчивается в цикле.

0

Нет необходимости связывать/развязывать события щелчка каждый раз, когда вы показываете и скрываете вещи. Вы можете заставить функцию onclick определить, показывать или скрывать:

$(document).ready(function () {
    /*(...) Code for forms (...)*/
    $("#hide").on('click', function(){
        if($("#course").is("visible")){
            HideAll;
        } else {
            ShowAll;
        }
    });
}    
function HideAll() {
    $("#course,#students").hide();
    $("#hide").text("Show course");
}

function ShowAll() {
    $("#course,#students").show();
    $("#hide").text("Hide course");
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню