Переключение картинок между двумя button

#javascript #html #jquery #css

Подскажите оптимальный способ : нужно по нажатию на первый button вывести первую
картинку, по нажатию на второй button - вывести вторую картинку. 
Когда выводится одна картинка, - другая скрывается.   

Пример кода:


  
  


  
  



div {
  display: inline-block;
  width: 400px;
  text-align: center;
}
button {
  font-size: 30px;
}
.apple {
  display: none;
}

    

Ответы

Ответ 1

Сделал универсальный и обновленный вариант на 4 строчки jQuery: 



$('.box').on('click', '.btn', (e)=> {
    const srcAttr = $(e.target).data('src');
    $('.image').css('background-image', `url(${srcAttr})`);
});
.box {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
button {
  font-size: 24px;
}

.image-box {
  display: flex;
  justify-content: center;
}
.image {
  height: 250px;
  width: 250px;
  background-size: cover;
  background-repeat: no-repeat;
}


  
  




   






Пример на JSFiddle.


Ответ 2

В JS noob, кажется не слишком хорошим решением, но всё же вот:


var first = document.getElementById('btn1');
var second = document.getElementById('btn2');
var watermelon = document.getElementsByClassName('watermelon')[0];
var apple = document.getElementsByClassName('apple')[0];

first.onclick = function() {
  apple.classList.add("off");
  watermelon.classList.remove("off");
  watermelon.classList.add("on");
}

second.onclick = function() {
  watermelon.classList.add("off");
  apple.classList.remove("off");
  apple.classList.add("on");
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

button {
  font-size: 20px;
  height: 50px;
}

.on {
  display: block;
}

.off {
  display: none;
}