0

jQuery でこれを理解するのに問題があります。同じクラスを共有している場合、以前の UL の LI から後の UL にコンテンツを追加する必要があります。つまり、HTML には次の 2 つのリストがあります。

<ul id="bullet-content">
    <li class="shared-class-1">
        <h3>First Title</h3>
        <p>First Content</p>
    </li>
    <li class="shared-class-2">
        <h3>Second Title</h3>
        <p>Second Content</p>
    </li>
</ul>

その後：

<ul class="bullets">
     <li class="shared-class-1">
         <h3 class="bullet-title">#</h3>
         <p class="bullet-content">#</p>
     </li>
     <li class="shared-class-2">
         <h3 class="bullet-title">#</h3>
         <p class="bullet-content">#</p>
     </li>
</ul>

「bullet-content」から「bullets」にコンテンツを転送するには、次の jQuery を使用します (また、li がクラス名を共有するかどうかに応じて、「アクティブな」クラスを追加または削除します)。

$('.bullets li').each( function(j) { 
    var classes = this.className.split(/\s+/); 
    for (var j=0,len=classes.length; j<len; j++){             
        var bulletDisplay = $('#bullet-content li');
        var bulletContentTitle = $(bulletDisplay).find('h3').html();
        var bulletContentBody = $(bulletDisplay).find('p').html();                    
        if ($(bulletDisplay).hasClass(classes[j])){ 
            $(this).addClass('active');
            $(this).find('h3').html(bulletContentTitle);
            $(this).find('p').html(bulletContentBody);
        } else {
            $(this).removeClass('active');
        }
    }   
});

この種の作品ですが、両方の .bullets li に同じコンテンツが取り込まれてしまいます。つまり、両方の lis からではなく、bullet-content の最初の li からです。別のループが理にかなっていると思いますが、その方法を理解しようとしています。どんな助けでも大歓迎です。

4

2 に答える 2

0

私が見ているものに基づいて、何かを見逃している可能性があります。これはおそらくベースをカバーするはずです

    $(function ()
    {
        $('li', $('#bullet-content')).appendTo('.bullets');

        $('.bullets li').each(function ()
        {
            $($(this).attr('class').split(' ')).each
            (function ()
            {
                if($('.' + this).length > 1)
                {
                    $('.' + this).addClass('active');
                }
                else
                {
                    $('.' + this).removeClass('active');
                }
            });
        });
    });
于 2013-04-23T18:58:04.923 に答える