1

これと似たようなことがすでに尋ねられていることは知っていますが、私の例はまったく異なり、うまく機能させることができません。

例: http://jsfiddle.net/xhUZd/

<ul id="list">
<li>
    <div class="box1">
       <span class="one"></span>
       <span class="two"></span>
       <span class="three"></span>
    </div>
    <div class="box2">
       <span class="one"></span>
       <span class="two"></span>
       <span class="three"></span>
    </div>
</li>
<li>
    <div class="box1">
       <span class="one"></span>
       <span class="two"></span>
       <span class="three"></span>
    </div>
    <div class="box2">
       <span class="one"></span>
       <span class="two"></span>
       <span class="three"></span>
    </div>
</li>
</ul>

ミッション：

ホバー時

"Box2" の span.one - クラス "bg1" を "Box1" の span.one に追加します。

"Box2" からの span.two - クラス "bg2" を "Box1" からの span.two に追加します。

"Box2" の span.three - クラス "bg3" を "Box1" の span.three に追加します。

これは、各「li」で個別に機能する必要があります。

助けてください！

4

2 に答える 2

3

私はお勧めします：

$('#list').on('click', '.box2 span', function(){
    var self = $(this),
        box1 = self.closest('li').find('.box1'),
        i = self.index();
    box1.find('span').eq(i).addClass('bg' + (i + 1));
});

JS フィドルのデモ。

2 回目のクリック (または別のクリック) でクラス名を切り替えたい場合は、次のように置き換えaddClass()ますtoggleClass()。

$('#list').on('click', '.box2 span', function(){
    var self = $(this),
        box1 = self.closest('li').find('.box1'),
        i = self.index();
    box1.find('span').eq(i).toggleClass('bg' + (i + 1));
});

JS フィドルのデモ。

どういうわけか、要素をクリックするのではなく、ホバーするときにクラスを操作するという要件を逃してしまいました。したがって、実際に機能する答えは次のようになります。

$('#list').on('mouseenter mouseleave', '.box2 span', function(){
    var self = $(this),
        box1 = self.closest('li').find('.box1'),
        i = self.index();
    box1.find('span').eq(i).toggleClass('bg' + (i + 1));
});

OP自身によって適応/修正されたJS Fiddle demo 。

参考文献:

于 2013-07-28T13:46:22.433 に答える
0

どうやら私は要件を完全に逃したようです。これは、ホバー動作がすべての LI のすべての DIV にわたってすべての SPAN に追従することを想定した新しい試みです。

$(function () {
    var classMap = {
        one: 'bg1',
        two: 'bg2',
        three: 'bg3'
    };

    $('#list').on('mouseenter mouseleave', 'li div span', function () {
        var $this = $(this);
        $this
            .closest('div')
            .prev('div')
            .find('span.' + $this.attr('class'))
            .toggleClass(classMap[$this.attr('class')]);
    });
});
于 2013-07-28T13:39:31.317 に答える