javascript - 使用 jquery 更改按钮的背景图像(每个按钮都有其独立的 id)

Question

我曾尝试创建一个类似于 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”存储用户单击按钮时要放置的图像以代替以前的图像。

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

Answer 1

您错误地使用了 .css 方法。您需要在属性和应用程序之间使用冒号而不是逗号。目前你有:

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

并且您需要将其更新为:

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

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

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

此外，您可能会遇到 jQuery 查找 Id 的问题，因为其中有一个斜线。如果您遇到此问题，请改用以下内容作为您的选择器:

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

这是一个有效的代码笔:

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