javascript onClick 更改div的背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8732523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript onClick change background picture of div
提问by barerd
My ultimate goal is to change the background of a div through clicking on the sampla picture.
我的最终目标是通过单击示例图片来更改 div 的背景。
First I wrote this:
首先我写了这个：
<a onclick="document.getElementById('sp').style.background="url('/assets/castle.png')"">...<a>
but it didn't work. I noticed that the problem was usage of multiple " and '. So put the function into a script tag:
但它没有用。我注意到问题是使用了多个 " 和 '。所以把这个函数放到一个脚本标签中：
<script type="text/javascript">
var pic="";
function showP(pic) { document.getElementById('sp').style.background='url(pic)';};
</script>
<a onclick="showP(/assets/castle.png)"><img src="/assets/castle.png" width="50px" height="50px"></a>
As supposed by seeing /assets dir, this is a rails app. I also tried o use jQuery selectors like $("#sp").css() or dropping the variable altogether and trying the function as:
正如看到 /assets 目录所假设的那样，这是一个 rails 应用程序。我还尝试使用 jQuery 选择器，如 $("#sp").css() 或完全删除变量并将函数尝试为：
function showp1() { document.getElementById('sp').style.cssText='background: transparent url(/assets/castle.png) no-repeat 0 0;'}
to try out solutions proposed in questions with similar titles but none did work. Whatever I try, on the html source, the portion showP(/assets/castle.png)"below is marked red:
尝试在具有类似标题但没有奏效的问题中提出的解决方案。无论我尝试什么，在 html 源代码中，下面的showP(/assets/castle.png)"部分被标记为红色：
<a onclick="showP(/assets/castle.png)"><img src="/assets/castle.png" width="50px" height="50px"></a>
Are there any suggestions?
有什么建议吗？
回答by Ansel Santosa
Avoid putting JS in your HTML code. Use unobtrusive event listeners. They are very easy in jQuery:
避免将 JS 放入您的 HTML 代码中。使用不显眼的事件侦听器。它们在 jQuery 中非常简单：
$('#clickMe').on('click', function() {
$('#changeMe').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})
回答by Tim S. Van Haren
Try this:
尝试这个：
<script type="text/javascript">
function showP(pic) {
document.getElementById('sp').style.background = 'url(' + pic + ')';
};
</script>
<a onclick="showP('/assets/castle.png')">
<im src="/assets/castle.png" width="50px" height="50px" />
</a>
You needed to pass a string to the showPfunction in the onclickhandler, which should be in quotes. You're passing a string into the function, which is in the picvariable being passed into the function. You want that string variable's value to be concatenated with the URL rule for the background style.
您需要将一个字符串传递给处理程序showP中的onclick函数，该字符串应该用引号引起来。您将一个字符串传递给函数，该字符串位于传递给函数的pic变量中。您希望该字符串变量的值与背景样式的 URL 规则连接。
回答by Brendan
As others have said, you do seem to have an issue with quotes. You can check out my working example on jsFiddle.
正如其他人所说，您似乎对引号有问题。您可以在 jsFiddle 上查看我的工作示例。
回答by Diodeus - James MacFarlane
the background image URL does not require quotes. Try:
背景图片 URL 不需要引号。尝试：
<a onclick="document.getElementById('sp').style.background='url(/assets/castle.png)'">...<a>
