2

これまでに試したことが機能していないため、jquery の each() の使用方法を理解しようとしています。

私の例では、「特別な」divがクリックされたときに最初の要素.each()に境界線を追加するために使用しようとしています。次に「特別な」div がクリックされたときに、2 番目の「特別な」要素に境界線を追加します。3 回目に「特別な」div をクリックすると、3 番目の要素に境界線が追加されます。

JS

$.each(function(i) {
     $('.special').click(function(){
         $('.special[i]').css('border','2px solid red');
     }
     i++;
});

HTML

    <div class="special">fooft1</div>
    <div class="special">fooft2</div>
    <div class="special">fooft3</div>
    <div class="special">fooft4</div>
    <div class="special">fooft5</div>
    <div class="special">fooft6</div>
4

5 に答える 5

1 
var i = 0;
$('.special').click(function(){
         $(".special:eq("+i+")").css('border','2px solid red');
     }
     i++;
});
于 2012-12-08T14:43:18.960 に答える
1

これを試して

var i = 0;
$('.special').click(function() {
    $('.special').eq(i).css('border', '2px solid red');
    i++;
});

働くフィドル

于 2012-12-08T14:41:12.463 に答える
1

.each()反復関数です。for eachステートメントの代わりとして役立ちます。

また、2 番目のセレクターが正しくありません'.special[i]'。これは jQuery によって解釈されません。機能させるには、変数を連結する必要があります'.special[' + i + ']'。これにより、コードはセット内のすべての要素に境界線を追加します。

于 2012-12-08T14:44:53.837 に答える
1

あなたはこれを望んでいませんeach：

(function() {
    var nextIndex = 0;

    $(".special").click(function() {
        $('.special').eq(nextIndex).css('border','2px solid red');
        ++nextIndex;
    });

})();

(関数をラッピングする理由は、グローバルを作りたくないからですnextIndex。コードが既に関数内にある場合は、追加のラッパーは必要ありません。)

または、スペシャルが動的でない場合は、必要に応じてコール間で覚えておくことができます。

(function() {
    var nextIndex = 0,
        specials = $(".special");

    specials.click(function() {
        specials.eq(nextIndex).css('border','2px solid red');
        ++nextIndex;
    });

})();

ハンドラーを削除するなど、最後のものを過ぎた場合にも、何らかの動作が必要になる場合があります。

于 2012-12-08T14:40:01.493 に答える
0 
$('div.special').each(function(i,e) {
    $(this).click(function() {
        if($(this).hasClass('current')) {
            $(this).css('border', '1px solid red').removeClass('current');
            $(this).next().addClass('current');
        }
   });        
});

<div class="special current">fooft1</div>
<div class="special">fooft2</div>
<div class="special">fooft3</div>
<div class="special">fooft4</div>
<div class="special">fooft5</div>
<div class="special">fooft6</div>

http://jsfiddle.net/v7gJF/

于 2012-12-08T14:47:37.610 に答える