-1

我正在做这个界面，我有很多按钮，这些按钮只是一个带有这样背景图像的 li

#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 个按钮中的每一个都执行此操作。

希望我很清楚，提前谢谢

4

5 回答 5

5

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

$('.nove').click(function(){
   $(this).css('background-image', 'url(images/edit-menu/select/undo.png)');
})
于 2012-06-19T21:05:29.493 回答
2

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

$('li.nove').click(function() {
    $(this).css('background-image', 'url(images/edit-menu/icons/icon2.png)');
});
于 2012-06-19T21:05:31.910 回答
2

我假设您的意思是每个人都有不同的图像，因此您只想更改路径。

$('.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 + ')');
});

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

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

于 2012-06-19T21:06:26.933 回答
0

你可以这样做：

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 +')';
     }
   }
};
于 2012-06-19T21:06:49.537 回答
0

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

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

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

$("#menu ul.icons li").click(function(){
    $(this).css('background-image', function(index, oldValue){
        return oldValue.replace('icons', 'select');
    });
});
于 2012-06-19T21:12:42.113 回答