0

所以我有以下 HTML 代码：

<span class="full-width-red-left"></span>
<div class="full-width-red-wrapper">"Title
    <img src="/images/header_toggle_up.png" class="header-toggle" id="stafflist-icon" />
</div>
<span class="full-width-red-right"></span>
<div class="stafflist-content">
    <div class="full-width-content">
        Content
    </div>
</div>
<div class="full-width-footer"></div>

<span class="full-width-red-left"></span>
<div class="full-width-red-wrapper">"Title
    <img src="/images/header_toggle_up.png" class="header-toggle" id="stafflist-icon" />
</div>
<span class="full-width-red-right"></span>
<div class="stafflist-content">
    <div class="full-width-content">
        Content
    </div>
</div>
<div class="full-width-footer"></div>

这在页面上多次显示，由 PHP foreach 生成。

然后我有以下 JS 代码，我正在尝试开始工作：

<script type="text/javascript">
$(document).ready(function() {

    $("#stafflist-icon").toggle(function(){

       $(".stafflist-content").slideUp('slow');
    } , 

    function() { 
        $(".stafflist-content").slideDown('slow');
    }); 
}); 
</script>

显然，使用该代码，如果按下任何#stafflist-icon，所有 .stafflist-content DIVS 都会上下滑动。我需要的是当按下#stafflist-icon 时，只有下一个 .stafflist-content 向上或向下滑动，而不是每一个！

如果不使用计数器或 foreach 中的某些东西为每个人生成 ID，这是否可能？

4

1 回答 1

1

不能有多个具有相同ID的 DOM 元素！

只有具有该 ID 的第一个元素会收到该事件。

一切都不会如你所愿。

您可以使用此处nextFind所示的此插件来选择要滑动的项目。

//to be used instead of prev/nextAll().eq(0);
(function ($) {
    var dirFind = function (selector, dir) {

        var elems = [];
        this.each(function (i, item) {
            while (item = item[dir]) {
                if (item.nodeType == 1) {
                    if ($(item).is(selector)) {
                        elems.push(item);
                        break;
                    }
                }
            }
        });

        return (this.pushStack(elems, dir, selector));
    }

    $.each({
        'prevFind': 'previousSibling',
        'nextFind': 'nextSibling'
    }, function (method, dir) {
        $.fn[method] = function (selector) {
            return dirFind.call(this, selector, dir);
        };
    });
}(jQuery));
//end of new prevall, nextall

所以你可以这样做：

$(this).nextFind(".stafflist-content").slideDown('slow');
于 2012-08-22T21:05:40.980 回答