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 に答える