javascript - 使用jQuery更改按钮的背景图像(每个都有其单独的ID)

我试图创建一个类似于reddit中的投票系统。每个帖子都有两个按钮，与特定帖子关联的每个按钮都有不同的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”存储的图像将在用户单击按钮时替换以前的图像。

当我单击按钮时，图像没有改变。

最佳答案

您正在错误地使用.css方法。您需要在属性和申请者之间使用冒号而不是逗号。目前您有：

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

您需要将其更新为：

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

或删除括号，因为您只更新一种样式：

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

另外，由于jQuery中包含斜线，因此您可能会遇到jQuery查找ID的问题。如果遇到此问题，请使用以下作为选择器：

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

这是一个有效的codepen：

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

关于javascript - 使用jQuery更改按钮的背景图像(每个都有其单独的ID)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41832400/