Question

我正在使用这个界面，我有很多按钮只是一个像这样的背景图像的按钮

#menu ul.icons li.nove {
    background-image:url(images/edit-menu/icons/undo.png);
    background-size:contain;
    display:block;
    margin-top:29px;
}

<ul class="icons"> 
<li class="um"></li>
    <li class="dois"></li>
    <li class="tres"></li>
    <li class="quatro"></li>
    <li class="cinco"></li>
<li class="seis"></li>
    <li class="sete"></li>
    <li class="oito"></li>
    <li class="nove"></li>
    <li class="dez"></li>
</ul>

我需要创建一个代码，当用户点击它时我会更改按钮的背景图片，以显示该按钮已激活，我只需将url(images/edit-menu/icons/更改为url(images/edit-menu/select/并保留文件名相同。我需要一种动态执行此操作的方法，因此我不必为10个按钮中的每个按钮执行此操作。

希望我很清楚，先谢谢

Answer 1

我不确定你对button的意思是什么，但你可以试试这个：

$('.nove').click(function(){
   $(this).css('background-image', 'url(images/edit-menu/select/undo.png)');
})

Answer 2

你可以通过DOM修改css。 jQuery示例：

$('li.nove').click(function() {
    $(this).css('background-image', 'url(images/edit-menu/icons/icon2.png)');
});

Answer 3

我觉得你的意思是每个人都有不同的形象，所以你只想改变路径。

$('.icons').on('click', 'li', function(){
   var filename = $(this).css('background-image').split('/');
   filename = filename[filename.length - 1];
   filename = filename.substr(0, filename.length - 1);
   $(this).css('background-image', 'url(images/edit-menu/select/' + filename + ')');
});

这将获取背景图像并将其拆分为“/”，然后取出最后一个减去一个字符)并将其作为文件名返回。然后用它来改变背景图像。

Here's a jsfiddle。没有实际的图像，但您可以在firebug或webkit检查器中查看源代码，看它是否正常工作。

Answer 4

你可以这样做：

var btn = document.getElementById('buttonID');
btn.onclick = function() {
   for (var i = 0, i < document.getElementsByTagName('li').length; i++) {
     if (this.className === 'nove') {
        document.getElementsByTagName('li')[i].style.background = 'url('+ new path +')';
     }
   }
};

Answer 5

我认为你可以简单地用这样的东西（在jQuery中，未经测试）：

$("#menu ul.icons li").click(function(){
    $(this).css('background-image', $(this).css('background-image').replace('icons', 'select'));
});

编辑：如果您使用的是jQuery＆gt; = 1.4，我只是想出了一个更好的方法。

$("#menu ul.icons li").click(function(){
    $(this).css('background-image', function(index, oldValue){
        return oldValue.replace('icons', 'select');
    });
});

更改背景图像的网址

5 个答案: