Question

所以我有以下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的情况下使用？

Answer 1

你不能拥有多个带有相同 ID的DOM元素！

只有具有该ID的第一个元素才能获得该事件。

没有什么能像你想要的那样起作用。

您可以使用此nextFind插件here来选择要播放的项目。

//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');

多个切换在同一页面上

1 个答案: