Использование функции для запуска .toggle () вместо .click () - PullRequest
Новая
       22

Использование функции для запуска .toggle () вместо .click ()

1 голос
/ 02 марта 2012

Я пытаюсь создать простую функцию, которая может принимать параметр и передавать его в событие .toggle (). Эта страница содержит потенциально сотни отдельных событий переключения. Я хочу, чтобы одна функция обрабатывала все эти события. 

 function toggleVehicles(partId) {
$("#"+partId+"vehicles").fadeToggle('fast');
}

Функция вызывается нажатием на строку таблицы: 

<tr id="<? echo $id; ?>Control" onClick="showVehiclesbyPart(<? echo $id; ?>); toggleVehicles(<? echo $id; ?>)" class="list">

Функция showVehiclesbyPart - это сбор данных AJAX, за которым следует рассматриваемая функция.

Функция работает, за исключением того, что при первоначальном щелчке переключатель не выполняется должным образом. Похоже, что он мгновенно переключается. Любые последующие клики будут правильно переключать div.

Я посмотрел другие посты, касающиеся подобных вопросов, и была упомянута обязательная ссылка. Я новичок в jQuery и Javascript, и я не могу найти то, что, по моему мнению, легко исправить.

Страница расположена по адресу http://www.partsconsign.com. Разверните категорию и щелкните запись номера детали, чтобы увидеть проблему.

Ответы [ 2 ]

1 голос
/ 02 марта 2012

Это немного поздно, но вот о чем я подумала, когда сказала, что использовать методы обработчика событий jQuery. Обратите внимание, что я сделал несколько изменений в соответствии со своими методами и использовал cellpadding и cellspacing в качестве ярлыка для более удобного отображения таблицы (в большинстве случаев я не использовал бы эти атрибуты на практике).

Вы увидите, что я создаю базовый элемент error ($err), который я затем клонирую и добавляю после строки щелчка при первом нажатии. Затем я переключаю это tr.err, используя $(this).next('.err').

Это гораздо проще сделать, чем с помощью встроенных обработчиков событий, как у вас.

HTML 

<div class="parts-list">
    <h1 class="link" id="filtersControl">FILTERS</h1>
    <table class="list" width="100%" cellspacing="1" cellpadding="1" border="1">    
        <tr>
            <th class="first" width="128" scope="col">FA PART#</th>
            <th width="213" scope="col">MOTORCRAFT# (FORD#)</th>
            <th width="226" scope="col">DESCRIPTION</th>
            <th width="87" scope="col">ON-HAND</th>
            <th width="107" scope="col">USE:</th>
        </tr>
        <tr id="110Control" class="list">
            <td class="first alt link"></td>
            <td class=" alt link"><a href="#">(2C2Z1107BA)</a></td>
            <td class=" alt link"><a href="#">WHEEL STUD </a></td>
            <td class=" alt link"><a href="#">5</a></td>
            <td class=" alt link">
                <input name="110" type="text" id="110" size="3" maxlength="2" />
            </td>
        </tr>
        <tr id="109Control" class="list">
            <td class="first link"></td>
            <td class=" link"><a href="#">(2C2Z1012AA)</a></td>
            <td class=" link"><a href="#">WHEEL NUT </a></td>
            <td class=" link"><a href="#">5</a></td>
            <td class=" link">
                <input name="109" type="text" id="109" size="3" maxlength="2" />
            </td>
        </tr>
    </table>
</div>

CSS 

.parts-list {
    border: 1px solid #86BBD2;
    background: #CEE7EE;
}
.parts-list h1 {
    margin: 0;
    padding: 4px;
    font: sans-serif;
    font-size: 1em;
    font-weight: normal;
    color: #acacac;
}
.parts-list table.list {
    display: none;
}

Javascript 

$(document).ready(function(){
    var $partslist = $('.parts-list'),
        cols = $partslist.find('table.list tr td').length,
        $err = $('<tr><td>');

    $err.addClass('err')
        .find('td')
        .attr('colspan', cols)
        .text('This part does not fit any vehicles in your fleet.')
        .click(function(){
            $(this).toggle();
            return false;
        });

    var toggleOn = function(){
        var $this = $(this),
            $clone;

        if (!$this.next().is('.err')) {
            $clone = $err.clone(true);
            $(this).after($clone);
        } else {
            $this.next('.err').show();
        }
    };

    var toggleOff = function(){
        var $next = $(this).next();

        $(this).next('.err').hide();
    };

    $partslist.find('h1').click(function(){
        $(this).siblings('table.list').toggle();
    });

    $partslist.find('table.list tr').not(':has(th)').toggle(toggleOn, toggleOff);
});

http://jsfiddle.net/kREhM/

1 голос
/ 02 марта 2012

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

display: table-row;

до 

display: none;

Измените эти строки на display: none; при загрузке страницы, чтобы при первом нажатии они отображались, а не скрывались.

...