Как вернуть предыдущее состояние background для div ? Java Script

268

26 ноября 2017, 12:55

Существует div у которого значение backgroundImage="url('img/q1.jpg')". После нажатия на div происходит смена картинки на hell.jpg. Вопрос, как при повторном нажатии этого же div вернулась предыдущая картинка (q1.jpg)? Т.е как вернуть предыдущее состояние.

 <!DOCTYPE html>
<html lang="en">
<head>
     <style type="text/css">
        .blocks {border: 2px solid red;margin:auto;}
        hr {height: 0px}
        #f1 {border: 1px solid black; margin: 9px; background: url(img/q2.png); width:590px;height: 300px;display: inline-block;}
        #f2{border:1px solid black;margin: 10px;background: url(img/q2.png);width: 590px;height: 300px;display: inline-block;}
        .div{
 background-image: url(https://i.imgur.com/pXLmSQU.jpg);
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat
 width:300px; 
 height:300px;
}
     </style>
    <meta charset="UTF-8">
    <title>Document_testing</title>
    <script src="jstest.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>

<!-- Центральное поле -->   <center><p><h1>Hello</h1></p></center>

<div class="blocks">
    <div id="f1">First block</div>
    <div id="f2">Second block</div>
</div>

</body>
</html>



window.addEventListener('load',regEvent,false);
function regEvent(e)

       {

    document.getElementById("f2").addEventListener("click",oClick,false);

      }



function oClick(e) {
  var element = document.getElementById("f2");
  if (element.style.backgroundImageOld) {
    element.style.backgroundImage = element.style.backgroundImageOld; // restore original value
    delete element.style.backgroundImageOld; // clean up for next click
  } else {
    element.style.backgroundImageOld = element.style.backgroundImage; // remember original value
    element.style.backgroundImage = "url('img/hell.jpg')"; // set new value
  }
}

Answer 1

Нет чудесного способа сказать диву: "А ну-ка, вернись в свое начальное состояние!" Раз Вы меняете свойство, то должны запомнить старое значение, если хотите в дальнейшем его восстановить.

function oClick(e) {
  var element = document.getElementById("f2");
  if (element.style.backgroundImageOld) {
    element.style.backgroundImage = element.style.backgroundImageOld; // restore original value
    delete element.style.backgroundImageOld; // clean up for next click
  } else {
    element.style.backgroundImageOld = element.style.backgroundImage; // remember original value
    element.style.backgroundImage = "url('img/hell.jpg')"; // set new value
  }
}

(Все гораздо проще, если использовать css классы.)

Вот пример работающего кода:

function oClick(e) { 
  var element = this;//document.getElementById("f2"); 
  if (element.style.backgroundColorOld) { 
    element.style.backgroundColor = element.style.backgroundColorOld; 
    delete element.style.backgroundColorOld; 
  } else { 
    element.style.backgroundColorOld = element.style.backgroundColor; 
    element.style.backgroundColor = "lightgreen"; 
  } 
} 
 
document.getElementById("f2").onclick = oClick;

<div id="f2" style="background-color:pink;"> 
It's been a long time that I have been waiting<br/> 
For the words you never have said.<br/> 
But today my last hope has vanished<br/> 
For they say you are going away.<br/> 
<br/> 
Come and stay by my side, if you love me,<br/> 
Do not hasten to bid me adieu.<br/> 
And remember the Red River Valley<br/> 
And the girl who have loved you so true.<br/> 
</div>

Update

Так у Вас первоначальный фон определен отдельным стилем. Как же это мы не догадались! Вот что Вам нужно:

function oClick(e) {
  var element = document.getElementById("f2");
  if (element.style.backgroundImage) {
    element.style.backgroundImage = null; // clean up for next click
  } else {
    element.style.backgroundImage = "url('img/hell.jpg')"; // set new value
  }
}

Answer 2

Ну как пример можно вот так:

var first = true; 
 
var new_bg ="https://mosthdwallpapers.com/wp-content/uploads/2017/02/Cute-And-Beautiful-Asian-Girls-Wallpapers.jpg"; 
var old_bg = "https://i.imgur.com/pXLmSQU.jpg"; 
   
window.addEventListener('load', regEvent, false); 
 
function regEvent(e) { 
  document.getElementById("div").addEventListener("click", oClick, false); 
} 
 
function oClick(e) {  
   if(first){ 
      document.getElementById("div").style.backgroundImage = "url('"+new_bg+"')"; 
   }else{ 
      document.getElementById("div").style.backgroundImage = "url('"+old_bg+"')";  
   } 
   first = !first;  
}

#div{ 
 background-image: url(https://i.imgur.com/pXLmSQU.jpg); 
 background-size:cover; 
 background-position:center; 
 background-repeat:no-repeat 
 width:300px;  
 height:300px; 
}

 <div id="div"></div>

Если можно то Можно на Jquery:

$('.div').bind('click', bg); 
var first = true; 
 
var new_bg ="https://mosthdwallpapers.com/wp-content/uploads/2017/02/Cute-And-Beautiful-Asian-Girls-Wallpapers.jpg"; 
var old_bg = "https://i.imgur.com/pXLmSQU.jpg"; 
 
function bg(e) { 
    if(first){ 
      $(this).css({"background-image":"url("+new_bg+")"}); 
    }else{ 
      $(this).css({"background-image":"url("+old_bg+")"}); 
    } 
    first = !first; 
}

.div{ 
 background-image: url(https://i.imgur.com/pXLmSQU.jpg); 
 background-size:cover; 
 background-position:center; 
 background-repeat:no-repeat 
 width:300px;  
 height:300px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div"></div>

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Расчет высоты элемента в vh

1vh = 1 % от viewport

180

CSS

Как подогнать код яндекс денег под ширину мобильной версии сайта

Как подогнать код яндекс денег под ширину мобильной версии сайта (сделать его уже)

214

CSS

Окрасить полупрозрачный белый CSS спрайт

У меня есть атлас в виде PNG картинки, который содержит много спрайтов, имеющих прозрачные области, окрашенные в белый цветПри создании атласа...

225

MySQL

Авторизация с помощью redbean не подключается к БД

Fatal error: Uncaught exception 'PDOException' with message 'Could not connect to database (reg)' in D:\OpenServer\domains\www

244