jqueryを使用してボタンの背景画像を変更します（012）。

Question

私はredditと同様の投票システムを作成しようとしました。各投稿には2つのボタンがあり、特定の投稿に関連付けられた各ボタンは異なるIDを持ちます。私はすべてのボタンのイメージを無色の矢印として設定しました。

<div class="details"> 
<li>AAAAA</li></div> 
<div id="voting"> 
    <div class="vote-up"><button id="up-e/aaaaa" title="Up" class="up " onclick="vote('e/aaaaa', 1,'swap')" ></button> 
    </div> 
    <div id="vote-score"> 
    <div id="score-e/aaaaa"><span>51</span></div> 
    </div> 
    <div class="vote-down"><button id="down-e/aaaaa" title="Down" class="down" onclick="vote('e/aaaaa', 0, 'swap')" ></button> 
    </div></div> 

</div> 
<div id="content"> 

<div class="details"> 
<li>MIT</li></div> 
<div id="voting"> 
    <div class="vote-up"><button id="up-e/mit" title="Up" class="up " onclick="vote('e/mit', 1,'swap')" ></button> 
    </div> 
    <div id="vote-score"> 
    <div id="score-e/mit"><span>40</span></div> 
    </div> 
    <div class="vote-down"><button id="down-e/mit" title="Down" class="down" onclick="vote('e/mit', 0, 'swap')" ></button> 
    </div></div> 
    </div> 

これは正常に動作して投票システムです。これまでこのスタイル

vote-up button{ 

height: 32px; 
width: 32px; 
border: 0; 
background: url("upvote.png"); 
} 
.vote-down button 
{ 
height: 32px; 
width: 32px; 
border: 0; 
background: url("downvote.png"); 
} 

と は、各ポストがアップし、下向きの矢印があります。ユーザーがボタンをクリックすると、ボタンの画像を変更する必要があり、そのために私はjQueryのでは、この機能を書かれている

function vote(id, vote, userid){ 
if(!logged) 
{ 
    alert("You must be logged in to vote"); 
} 
else { 
    if(vote==1){ 
    $("#up-"+id).css({'background', 'url("upvoted.png")'}); 
    $("#down-"+id).css('background', 'url("downvote.png")'); 

     $("#up-"+id).attr('disabled', true); 
     $("#down-"+id).attr('disabled', false); 

     } 

    else {$("#down-"+id).css('background', 'url("downvoted.png")'); 
     $("#up-"+id).css('background', 'url("upvote.png")'); 

     $("#down-"+id).attr('disabled', true); 
     $("#up-"+id).attr('disabled', false); 
    }} 

「downvoted.png」と「upvoted.pngは」の場所であることをしている画像を保存しますユーザーがボタンをクリックすると元の画像の場所。

ボタンをクリックすると、画像は変更されません。

Answer 1

.cssメソッドを誤って使用しています。あなたはあなたの属性とアプライヤーの間にカンマがないコロンを持つ必要があります。

.css({'background', 'url("upvoted.png")'}); 

をそして、あなたはそれを更新する必要があります：現在、あなたは持っているあなたがかもしれないまた

.css('background', 'url("upvoted.png")'); 

：あなたは一つだけのスタイルを更新しているので、

.css({'background':'url("upvoted.png")'}); 

またはブラケットを取り外しそれにスラッシュが入っているため、jQueryのIDに問題があります。あなたはこの問題に遭遇した場合は、代わりにあなたのセレクタとして次のコマンドを使用します。

$("button[id*='down-" +id + "']") 

そしてここでは、作業codepenさ：

http://codepen.io/egerrard/pen/EZvYpQ