Question

我的最终目标是通过点击sampla图片来改变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 dir所假设的那样，这是一个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>

有什么建议吗？

Answer 1

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

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

See this Fiddle.

Answer 2

试试这个：

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

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

Answer 3

背景图片网址不需要引号。尝试：

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

Answer 4

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

javascript onClick更改div的背景图片

4 个答案: