Question

我想创建一个函数，使元素的CSS背景图像在点击时更改为不同的图像。理想情况下，第二次单击会将图像还原为原始图像，依此类推。

我在这个网站上搜索了类似的例子，我找到了一些接近的例子，但没有任何内容。我希望有人可以在下面的Fiddle中查看我的HTML / CSS，并告诉我需要对jQuery做些什么。而不是粘贴我在别处找到的一些代码。

HTML：

<header id="switch">
    <h1>
        <span>Howie Mandel</span>
    </h1>
    <h2>
        <span>Howie Doin</span> 
    </h2>
</header>

CSS：

header {
    text-align: center;
    padding-top: 4em;
    background-image: url("https://media.timeout.com/images/102596453/image.jpg");
    background-size: cover;
    height: 10em;
    background-position: bottom;
 }

 header-alt {
    text-align: center;
    padding-top: 4em;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c0/LA_San_Gabriel_Mountains.jpg");
    background-size: cover;
    height: 10em;
    background-position: bottom;
 }

Fiddle

Answer 1

您可以切换覆盖标准背景图像的类。看一看。

＆＃13;

Python 2.7.14 (v2.7.14:84471935ed, Sep 16 2017, 20:19:30) [MSC v.1500 32 bit (Intel)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> print u'\u2080'
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "D:\dev\Python27\lib\encodings\cp437.py", line 12, in encode
    return codecs.charmap_encode(input,errors,encoding_map)
UnicodeEncodeError: 'charmap' codec can't encode character u'\u2080' in position 0: character maps to <undefined>

Python 3.3.5 (v3.3.5:62cf4e77f785, Mar  9 2014, 10:35:05) [MSC v.1600 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> print('\u2080')
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "D:\dev\Python33x64\lib\encodings\cp437.py", line 19, in encode
    return codecs.charmap_encode(input,self.errors,encoding_map)[0]
UnicodeEncodeError: 'charmap' codec can't encode character '\u2080' in position 0: character maps to <undefined>

Python 3.6.3 (v3.6.3:2c5fed8, Oct  3 2017, 18:11:49) [MSC v.1900 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> print('\u2080')
₀

＆＃13;

$('.change').click(() => {
$('#switch').toggleClass('header-alt');
});

＆＃13;

header {
	text-align: center;
	padding-top: 4em;
	background-image: url("https://media.timeout.com/images/102596453/image.jpg");
	background-size: cover;
	height: 10em;
	background-position: bottom;
 }
  
 .header-alt {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c0/LA_San_Gabriel_Mountains.jpg") !important;
 }

＆＃13;

Answer 2

使用带有修饰符的toggleclass。

header {
  text-align: center;
  padding-top: 4em;
  background-size: cover;
  height: 10em;
  background-position: bottom;
  background-image: url("https://media.timeout.com/images/102596453/image.jpg");
}

.alt{
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c0/LA_San_Gabriel_Mountains.jpg");
}

这样你只需要一行jquery

$('#button').click(function () {
  $('header').toggleClass('alt');
});

Answer 3

这应该可以解决问题

$('#divID').css("background-image", "url(/myimage.jpg)");

您可以像这样设置点击事件

$('#divID').on('click', function() {
   ...
   $('#divID').css("background-image", "url(/myimage.jpg)");  
}

Answer 4

我没有使用两个CSS规则（header和header-alt），而是使用这样的类：

header {
  text-align: center;
  padding-top: 4em;
  background-size: cover;
  height: 10em;
  background-position: bottom;
}
header.mandel {
  background-image: url("https://media.timeout.com/images/102596453/image.jpg");
}
header.doin {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c0/LA_San_Gabriel_Mountains.jpg");
}

首先在HTML中为您要开始的课程（<header class="mandel">）

提供标题

然后你可以像这样使用jQuery：

$('#button').click(function () {
  $('header').toggleClass('mandel');
  $('header').toggleClass('doin');
});

你的按钮有ID按钮。

使用jQuery单击交换CSS背景图像

4 个答案: