Question

我正在尝试创建一个简单的函数，它可以获取一个参数并将其传递给.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。展开类别并单击部件号记录以查看问题。

Answer 1

您的问题是最初会显示显示车辆部件的表格行。当您第一次单击时，它会加载数据，然后从：

切换

display: table-row;

到

display: none;

在页面加载时将这些行更改为display: none;，因此首次点击它们时，它们将切换为显示而不是隐藏。

Answer 2

这有点晚了，但是当我说使用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/

使用函数触发.toggle（）而不是.click（）

2 个答案: