css和/或javascript更改单击图像的背景

Question

我有一个问题,我有一个div class="tasteTheRainbow",里面是img标签.一个标签特别是一个名为的png类.gA3.

现在tasteTheRainbow已经有了一个CSS背景网址,但是当你点击或点击.gA3我想要更改后台网址时.

我已经尝试了许多其他stackoverflow帖子,但没有找到解决方案.

这是我的HTML和我的CSS:

<div class="tasteTheRainbow">
    <div class="greenArrow">
        <img class="gA1" src="assets/arrows/down.png"/>
        <img class="gA2" src="assets/arrows/in.png"/>
        <img class="gA3" src="assets/arrows/left.png"/>
        <img class="gA4" src="assets/arrows/out.png"/>
        <img class="gA5" src="assets/arrows/right.png"/>
        <img class="gA6" src="assets/arrows/up.png"/>
    </div>
</div>

.tasteTheRainbow {
    background-image: url(../assets/fivePix.png);
    background-repeat: repeat;
    position: absolute;
    background: url(../assets/tombrady1.jpg) no-repeat center center fixed !important;

    -webkit-background-size: cover;
    background-size: cover;
    display: block !important;
}

正如我上面提到的,我尝试过使用CSS classname:active.我也尝试了多个java脚本解决方案,他们根本不会将背景网址更改为image1到image2.

Answer 1

我推荐的解决方案是为元素的初始状态(示例.tasteTheRainbow)和新状态(示例.tasteTheRainbowNew)创建一个CSS类,然后使用Javascript来应用/删除该类.

$(function () { 
    $(".gA3").click(function () {
         $(this).parent(".tasteTheRainbow").toggleClass("tasteTheRainbowNew"); 
    }); 
});

在这里查看我的JSfiddle:http://jsfiddle.net/oxv0rc1k/2/

另外,请注意我加载了JQuery因为我的JS很糟糕而没有它.