1

stackoverflowの投票矢印と同じように、投票矢印クラスを切り替えたいと思います。ログインしたユーザーの場合、すでに投票している場合、htmlは次のようになります。

<a href="#vote" id="vote-up-%1$d" class="vote vote-up-on"></a>
<a href="#vote" id="vote-down-%1$d" class="vote vote-down-off"></a>

ユーザーが下矢印をクリックした後、応答が成功した場合、「vote-up-on」を「vote-up-off」に変更し、「vote-down-off」を「vote-down-one」に変更するにはどうすればよいですか？

4

4 に答える 4

4

まあ、これはSAの投票と同じように機能します-もう少し簡潔かもしれませんが、私は本当に仕事に戻る必要があります;-) 

<a href="#vote" id="vote-up-%1$d" class="vote vote-up">vote up</a>
<span class="votes">0</span>
<a href="#vote" id="vote-down-%1$d" class="vote vote-down">vote down</a>

およびjquery：

$(document).on('click', '.vote-up', function () {
    if(!$(this).hasClass('vote-locked')){     
        var votes = parseInt($(this).parent().find('.votes').text());  
        if(!$(this).hasClass('vote-off')){

            $(this).addClass('vote-off');
            $(this).nextAll('a').addClass('vote-locked');
            votes++;

        }
        else{

            $(this).removeClass('vote-off');
            $(this).nextAll('a').removeClass('vote-locked');
            votes--;

        }
       $(this).parent().find('.votes').text(votes);
   }
 });

 $(document).on('click', '.vote-down', function () {
     if(!$(this).hasClass('vote-locked')){  
        var votes = parseInt($(this).parent().find('.votes').text());  
        if(!$(this).hasClass('vote-off')){

            $(this).addClass('vote-off');
            $(this).prevAll('a').addClass('vote-locked');
            votes--;

        }
        else{

            $(this).removeClass('vote-off');
            $(this).prevAll('a').removeClass('vote-locked');
            votes++;

        }
       $(this).parent().find('.votes').text(votes);
    }
 });

http://jsfiddle.net/gqDgL/

于 2012-08-22T13:59:13.343 に答える
0

jQueryは、addClassとremoveClassを使用して、クラスを追加および削除できます。

$('#vote-up-%1$d').removeClass('vote-up-on');

$('#vote-up-%1$d').addClass('vote-up-off');
于 2012-08-22T13:59:47.007 に答える
0 
 $("#vote-up").click(function () {
            $(this).toggle();
            $(this).toggleClass("vote vote-down-off");
        });

これを試して

于 2012-08-22T14:01:24.740 に答える
0

Ajax応答を受信したときにコールバック関数を作成します。

function addVoteUpClass() {
    if (jQuery(".vote").hasClass("vote-up-on")) {
        jQuery(".vote-up-on").removeClass("vote-up-on").addClass("vote-up-off");
    }
}

jQuery.ajax({
    url: "your_url",
    method: "GET",
    success: function(data) {
        addVoteUpClass();
    }
});
于 2012-08-22T14:16:19.987 に答える