ループ内でこれからdivを探しますか？

Question

誰かが私は赤に色を変更したい第二のdiv上でクリックした場合、私は、ループ（同じコードが異なるdata-post-id）

<div class="vote"> 
    <div data-post-id="@item.PostId" data-vote-rank="1" class="vote-arrow vote-up glyphicon glyphicon-chevron-up"></div> 
    <div class="total-vote">0</div> 
    <div data-post-id="@item.PostId" data-vote-rank="-1" class="vote-arrow vote-down glyphicon glyphicon-chevron-down"></div> 
</div> 

で、このHTMLを持っています。

• 最初はすべてのdivが黒です。
• 誰かがクラス投票でdivをクリックした場合、色を赤に変更したいと思います。
• 誰かがクラス投票で再びdivをクリックした場合、何も起こりません。
• 誰かがクラスの投票ダウンを使ってdivをクリックした場合、クラス投票のdivは黒でなければならず、クラスの投票ダウンは緑でなければなりません。

問題は3つの状態があることです。私はクラスを有効にするために使用しようとしたが、これは（成功関数）は私が今来た限りです。

$(".vote-arrow").click(function() { 
    var postId = $(this).data("post-id"); 
    var voteRank = $(this).data("vote-rank"); 

    $.ajax({ 
     type: "GET", 
     url: "/Posts/Vote/", 
     data: { postId: postId, voteRank: voteRank }, 
     context: this, 
     success: function() { 
      switch (voteRank) { 
       case 1: 
        if ($(this).closest(".vote-arrow").hasClass("enabled")) { 
         $(this).css({ 'color': '#000' }); 
         $(this).addClass('enabled'); 
        } else { 
         $(this).css({ 'color': '#d9534f' }); 
         $(this).addClass('enabled'); 
        } 
        break; 
       case -1: 
        $(this).addClass('enabled'); 
        $(this).css({ 'color': '#5cb85c' }); 
        break; 
       default: 
      } 
     } 
    }); 
}); 

これが流れです。クリックして（上に赤、下に黒）、クリックして（両方とも黒）、もう一度クリックして（黒の上、緑の下）、上に（黒の両方）、上にもう一度上に黒はデフォルト値ですが、あなたは投票していません。

Answer 1

K Scandrettのように、RemoveやAddclassのようですが、あなたの場合はセレクタを拡張する必要があります。

$('.vote-arrow').click(function() 
 
{ 
 
    if($(this).parent().children('.vote-arrow').hasClass('enabled')) 
 
    { 
 
    $(this).parent().children('.vote-arrow').removeClass('enabled'); 
 
    } 
 
    else 
 
    { 
 
    $(this).addClass('enabled'); 
 
    } 
 
});

.vote-down.enabled 
 
{ 
 
\t color: green; 
 
} 
 
.vote-up.enabled 
 
{ 
 
\t color: red; 
 
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vote"> 
 
    <div data-post-id="@item.PostId" data-vote-rank="1" class="vote-arrow vote-up glyphicon glyphicon-chevron-up"></div> 
 
    <div class="total-vote">0</div> 
 
    <div data-post-id="@item.PostId" data-vote-rank="-1" class="vote-arrow vote-down glyphicon glyphicon-chevron-down"></div> 
 
</div> 
 
<div class="vote"> 
 
    <div data-post-id="@item.PostId" data-vote-rank="1" class="vote-arrow vote-up glyphicon glyphicon-chevron-up"></div> 
 
    <div class="total-vote">0</div> 
 
    <div data-post-id="@item.PostId" data-vote-rank="-1" class="vote-arrow vote-down glyphicon glyphicon-chevron-down"></div> 
 
</div>

Answer 2

コードの最初の部分は 'voteUp' あなたのAjaxの戻り値をシミュレートすることです。

$('div.vote-arrow').click(function(){ 

    var voteUp = $(this).hasClass('vote-up') === true ? 1 : 0; 

    if (voteUp) { 
    $(this).parent().children().removeClass('red'); 
    $(this).addClass('green'); 
    } else { 
    $(this).parent().children().removeClass('green'); 
    $(this).addClass('red'); 
    } 
}); 

そして、 'グリーン' と '赤' のためのクラスを設定

EDIT：

$('div.vote-arrow').click(function(){ 

    var voteUp = $(this).hasClass('vote-up') === true ? 1 : 0; 

    if (voteUp) { 
    if ($(this).parent().children().hasClass('red')) { 
     $(this).parent().children().removeClass('red'); 
    } else { 
     $(this).addClass('green');  
    } 
    } else { 
    if ($(this).parent().children().hasClass('green')) { 
     $(this).parent().children().removeClass('green'); 
    } else { 
     $(this).addClass('red');  
    } 
    } 
}); 

ここjsbin http://jsbin.com/qipoguqipu/edit?html,js,output