4

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

Пример кода:

<div class="box">
  <button class="b1">Push please</button>
  <img class="watermelon" src="https://cdn3.iconfinder.com/data/icons/food-set-3/91/Food_C246-256.png" alt="">
</div>
<div class="box">
  <button class="b2">Push please</button>
  <img class="apple" src="https://cdn3.iconfinder.com/data/icons/fruits-8/512/apple-256.png" alt="">
</div>


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

2 ответа 2

5

В 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;
}
<div class="box">
  <button class="b1" id="btn1">Watermelon</button>
  <button class="b2" id="btn2">Apple</button>
</div>
<div class="box">
  <img class="watermelon" src="https://cdn3.iconfinder.com/data/icons/food-set-3/91/Food_C246-256.png" alt="">
  <img class="apple off" src="https://cdn3.iconfinder.com/data/icons/fruits-8/512/apple-256.png" alt="">
</div>

2
  • Все равно благодарен тебе за ответ! Начну анализировать. Вообще хотел в jquery реализовать :) 9 мая 2018 в 21:30
  • 2
    Сейчас я допишу очень хороший ответ и скину на jQuery) жди)
    – Zicrael
    9 мая 2018 в 21:32
4

Сделал универсальный и обновленный вариант на 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <button data-src='https://cdn3.iconfinder.com/data/icons/food-set-3/91/Food_C246-256.png' class="btn">food</button>
  <button data-src='https://cdn3.iconfinder.com/data/icons/fruits-8/512/apple-256.png' class="btn">fruit</button>

</div>

<div class="image-box">
   <div class="image">
</div>

Пример на JSFiddle.

9
  • Крутой вариант, но к сожалению у меня не работает. У меня картинка бекграундом стоит( 9 мая 2018 в 22:43
  • Если приводить пример на твоем ответе - .image-box { background-image: image ; } 9 мая 2018 в 22:45
  • Так вопрос решился или помочь ещё чем-то ?
    – Zicrael
    9 мая 2018 в 22:50
  • 1
    Без проблем сейчас перепишу под твое решение но с тебя отметить ответ как верный^^
    – Zicrael
    9 мая 2018 в 22:54
  • 1
    Проверяй, сейчас так как ты хотел?
    – Zicrael
    9 мая 2018 в 23:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.