div onclick函数更改车身背景图

Question

我想要一个小的图片，就像一个按钮的作用，是一个功能，以改变身体的背景图像可点击。我完全是个新手，我正在努力学习。我想，最简单的方法是有一个带有background-image的div。我也必须使用非语义网格。

所以我几乎只有一个带有背景图像的div。如何编写此函数？我确信这真的很简单，我已经在这里读了大约20个帖子，但没有一个对我有用

编辑:添加了我的代码

​

#knapp {
  height:50px;
  width:50px;
  background-image:url(http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png);
  background-repeat:no-repeat;
  background-size:contain;	
  position:absolute;
  top:90vh;
  right:3vw;
}

<div id="knapp" class="grid-10 prefix-90"></div>

​

Answer 1

在div上添加光标以显示为可单击

   #knapp {
      cursor: pointer;
   }

您可以将新的背景图像放入新的css规则中

body.newbg {
    background-image:url(path-to-new-background.png);
}

这是带有旧背景图像的正文

body {
    background-image:url(path-to-old-background.png);
}

而使用jquery，只需像这样(在$(document).ready()中)添加/切换类：

$('#knapp').on('click', function(){

    $('body').addClass('newbg');
    // you could instead do toggleClass if you want for each click to have background switch between old background and new background
});

与所有其他答案相比，这是一种更清晰的方法，因为它将表示(css)、结构(html)和行为(javascript)分开。这是因为它没有使用JavaScript直接改变样式。而且，它不会用onclick污染html，这也是一种不好的做法。

下面是一个例子：https://plnkr.co/edit/aiGZmvvi6WWGFs7E9xTp

这里有一个循环的背景集合(多亏了Kai的想法) https://plnkr.co/edit/0djmmNM9OOTdfYyvLvUH?p=preview

Answer 2

创建一个具有onclick属性的按钮，其函数名类似于

1. 脚本中的函数，如下：

function replace() { document.body.style.backgroundImage = 'url(https://lh6.ggpht.com/8mgTDZXaLMS1JsnF28Tjh6dahHwN1FqcXCVnifkfppmNLqnD-mPBuf9C1sEWhlEbA4s=w300)'；}

解释：

将body的style属性(使用document.body对象)设置为other background-image。

如果有什么不清楚的地方，我很乐意解释。

工作示例：

​

function replace() {
  document.body.style.backgroundImage = 'url(https://lh6.ggpht.com/8mgTDZXaLMS1JsnF28Tjh6dahHwN1FqcXCVnifkfppmNLqnD-mPBuf9C1sEWhlEbA4s=w300)';  
}

body {
  background-image: url(http://www.julienlevesque.net/preview/google-smile-preview.jpg);
}

div {
  background:blue;
  color:#fff;
  float:left;
}

<div onclick="replace()">Replace background-image</div>

​

Answer 3

如果我理解这个问题，您应该能够在jQuery中创建一个变量，该变量是您想要使用的图像urls的所有字符串版本的数组：

var images = ['../images/####','../images/$$$$', 'http://some.other/url.here];

// do this for as many images as you want to cycle through

就像这样。

然后，您可以创建一个计数器变量：

var counter = 0;

并将其设置为零。

接下来，将事件侦听器on()添加到您的div，如下所示：

$('#knapp').on('click', function(){



});

最后，在事件侦听器中，将div的CSS background-image属性更改为数组中的一个图像：

// do this inside a document.ready() function
$('#knapp').on('click', function(){

    $(this).css('background-image','url("' + images[counter] + '")');
    counter++;

});

我希望这对你有帮助！此外，请记住递增counter

编辑----------------------------------------------------------------的

好了，我完全跳过了一个明显的事实，那就是计数器可能会太高，并访问超出范围的东西。要防止出现这种情况，请在on()侦听器中添加以下内容：

if(counter >= images.length - 1){

    counter = 0;

}

编辑2个--------------------------------------------------------------的

好的，一开始我不知道你到底在问什么，所以这是我的第二个答案。因为看起来你真正想做的只是在点击时切换一次背景图片，那么你可以使用类似这样的东西：

$(document).ready(function(){

    $('#knapp').on('click', function(){

        $(this).css('background-image','url("YOUR_NEW_URL_HERE")');

});

});

或者，您可以通过在CSS中创建两个相同的类(背景图像除外)并使用.addClass和.removeClass将一个替换为另一个来在两个图像之间切换。

编辑3---------------------------------------------------------------的

我从来没有想过我会编辑这篇文章这么多次，但显然我错过了body背景图片应该被改变(感谢评论)。我的错，谢谢你指出这一点(即使你在和别人说话)。