Javascript onClick改变div的背景图片答案

【问题标题】：Javascript onClick change background picture of divJavascript onClick改变div的背景图片
【发布时间】：2012-02-02 16:31:15
【问题描述】：

我的最终目标是通过单击示例图片来更改 div 的背景。

首先我是这样写的：

<a onclick="document.getElementById('sp').style.background="url('/assets/castle.png')"">...<a>

但它没有用。我注意到问题是多个“和”的使用。所以将函数放入脚本标签中：

<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>

正如看到/assets 目录所推测的，这是一个rails 应用程序。我还尝试使用 jQuery 选择器，如 $("#sp").css() 或完全删除变量并尝试以下功能：

function showp1() { document.getElementById('sp').style.cssText='background: transparent url(/assets/castle.png) no-repeat 0 0;'}

尝试在标题相似但没有奏效的问题中提出的解决方案。无论我尝试什么，在 html 源代码中，下面的 showP(/assets/castle.png)" 部分都标记为红色：

<a onclick="showP(/assets/castle.png)"><img src="/assets/castle.png" width="50px" height="50px"></a>

有什么建议吗？

【问题讨论】：

我建议创建一个JS Fiddle demo，然后链接到一个JS Fiddle demo，它可以重现您的用例（简要）和问题，并且还包含jquery 标签，因为您似乎正在使用它.

标签： javascript jquery hyperlink onclick jquery-events

【解决方案1】：

正如其他人所说，您似乎确实对引号有疑问。您可以查看我的working example on jsFiddle。

【讨论】：

【解决方案2】：

避免将 JS 放入 HTML 代码中。使用不显眼的事件监听器。它们在 jQuery 中非常简单：

$('#clickMe').on('click', function() {
    $('#changeMe').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})

See this Fiddle.

【讨论】：

我尝试了每个人的解决方案，但都没有奏效。我在 jsFiddle 上尝试了 jQuery 1.7.1 和 Brendan's，你的解决方案在那里工作。由于 Brendan 的代码比较重，我更喜欢你的。您可以查看the supposed page 的页面并告诉我代码的问题吗？通过检查页面源代码，您可以验证 jQuery 1.7.1 是否已加载并且另一个 jQuery 代码正在运行。
在您的页面上运行 jQuery 版本报告为 1.4.2。试试这个：$('img').click(function() { $('#sp').css('background-image', 'url(' + $(this).attr('src') + ')'); });
我删除了 jQuery.min1.4.2 文件并尝试了您的两种解决方案。他们没有工作。我准备了fiddle。它也不起作用。你能检查一下吗？我用 ...first-and-second-carousel.. 东西添加了整个 javascript 代码，因为我认为或者 javascript 的语法可能是原因。
Updated Fiddle。这只是行不通，因为在附加侦听器之前在.jc() 处引发了错误。确保您正在检查您的 JS 控制台是否有错误。
你是对的。我将 javascript 函数分离到一个 user.js 文件中，firebug 没有显示任何错误。也许您注意到页面源仍然将“javascript:;”部分标记为红色。任何想法，可能导致此错误的原因是什么？顺便说一下，对于 10-15 分钟的延迟，我很抱歉，但我正在 jsFiddle 中尝试解决方案还有我的页面。

【解决方案3】：

试试这个：

<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>

您需要将字符串传递给onclick 处理程序中的showP 函数，该字符串应该用引号引起来。您正在将一个字符串传递给函数，该字符串位于传递给函数的 pic 变量中。您希望将该字符串变量的值与背景样式的 URL 规则连接起来。

【讨论】：

感谢您让我想起“+ pic +”的用法，但这不起作用。

【解决方案4】：

背景图片 URL 不需要引号。试试：

<a onclick="document.getElementById('sp').style.background='url(/assets/castle.png)'">...<a>

【讨论】：