更改背景图片的URL

-1

我在做这个界面，我有很多这只是一个像这样更改背景图片的URL

#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个按钮中的每一个都做到这一点。

希望我是清楚的，在此先感谢

来源

2012-06-19 João Pedro

这是“动态”，因为它在页面加载后发生变化，或“动态”，如“我从来没有听说过查找和替换”？ –

我认为，你可以简单地做像这样的东西（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-19 21:12:42 Simon

我通过改变它有点''（“＃menu ul.icons li”）。（函数（）{varl urlicon = $（this）.css（'background-image'）。替换（'图标'，'选择'）; $（this）.css（'background-image'，urlicon） }）;' –

现在我只需要使它成为当我点击另一个按钮时，先前选择的一个返回到“图标”url –

你应该看看我的答案，我为你做到了。你可以结合我的。祝你好运！ –

我不知道你是什么意思与button，但你可以试试这个：

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

来源

2012-06-19 21:05:29 undefined

好的答案！：D – jsalonen

@jsalonen，和你的答案不一样吗？你应该得到满足感。 – Zhihao

@jsalonen谢谢:) – undefined

你可以只通过DOM修改CSS。使用jQuery示例：

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

来源

2012-06-19 21:05:31 jsalonen

我假设你的意思是每个人都有不同的图像，所以你只想改变路径。

$('.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检查器中查看源代码，以查看它的工作原理。

来源

2012-06-19 21:06:26 idrumgood

这是正确的答案，做得好！ –

+1为最佳答案。 – jsalonen

我认为这段代码会让我想要的地方，但它还没有工作，我添加console.log（文件名）到它的末尾，它返回'）'，记录$（this）.css（'background -image'）显示url没有变化 –

你可以这样做：

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-19 21:06:49

更改背景图片的URL

回答

相关问题