Как изменить фоновое изображение - PullRequest
Новая
       15

Как изменить фоновое изображение

1 голос
/ 18 апреля 2020

Я новичок в JS и пытаюсь создать простую функцию, в которой я нажимаю кнопку, и фоновое изображение меняется, но оно не работает (я пытался воссоздать более простой слайдер изображений). Я не могу понять, почему.

Это мой JS. Я использовал абсолютную ссылку, надеясь, что она может решить проблему, и предупреждение, чтобы увидеть, работал ли оператор if / else. 

const btnLeft = document.getElementById("btn-left");
const btnRight = document.getElementById("btn-right");

btnLeft.addEventListener("click", whenClicked);
btnRight.addEventListener("click", whenClicked);

function whenClicked() {
if (btnLeft.clicked) {
document.getElementById("img2").style.backgroundImage = 
"url('https://images.unsplash.com/photo-1494783367193-149034c05e8f?ixlib=rb- 
1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=diego-jimenez-A-NVHPka9Rk-unsplash.jpg')";
} else alert("no click!");

}

Это мое HTML: 

<div class="slide-container">

    <div class="slide" id="img1">
       <button id="btn-left"> <i class="fas fa-arrow-circle-left fa-3x " ></i></button>
        <button id="btn-right"><i class="fas fa-arrow-circle-right fa-3x " ></i></button>
    </div>

    <div class="slide" id="img2">

    </div>

</div>

Это актуально CSS. 

 .slide-container {
display: flex;  
 }

.slide:nth-child(1) {
background-image: url(../img/img1.jpg);
height: 789px;
width: 100%; 
flex-shrink: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.slide:nth-child(2) {
background-image: url(../img/img2.jpg);
height: 789px;
width: 100%; 
flex-shrink: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

#btn-left {
position: absolute;
top: 400px;
}
#btn-right {
position: absolute;
left: 1380px;
top: 400px;
}

Любая помощь очень ценится, я схожу с ума в течение нескольких часов! Спасибо.

РЕДАКТИРОВАТЬ. После помощи David784 у меня теперь есть: 

const btnLeft = document.getElementById("btn-left");
const btnRight = document.getElementById("btn-right");


btnLeft.addEventListener("click", whenClicked);
btnRight.addEventListener("click", whenClicked);

function whenClicked(e) {
if (e.currentTarget === btnLeft ) {
document.getElementById("img1").style.backgroundImage = 
"url('https://images.unsplash.com/photo-1494783367193-149034c05e8f? 
ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=diego-jimenez- 
A-NVHPka9Rk-unsplash.jpg')";
} 
else alert("no click!");
}

, и это работает. Но потом, когда я пытаюсь добавить то же самое для правой кнопки, например 

function whenClicked(e) {
if (e.currentTarget === btnRight ) {
document.getElementById("img1").style.backgroundImage = 
"url('https://images.unsplash.com/photo-1494783367193-149034c05e8f? 
ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=diego- 
jimenez-A-NVHPka9Rk-unsplash.jpg')";
} 
else alert("no click!");
}

, левая кнопка перестала работать. Почему?

1 Ответ

0 голосов
/ 18 апреля 2020

Ваш вопрос звучит так, как будто в части backgroundImage есть проблема, но я не могу воспроизвести ее (см. Рабочий фрагмент ниже).

Однако у меня были проблемы с if (btnLeft.clicked) ... я не уверен, Element.clicked вещь ... по крайней мере, я никогда не видел это раньше. Когда я изменил его на e.currentTarget===btnLeft, это просто сработало. (Подробнее см. Event.currentTarget ). 

const btnLeft = document.getElementById("btn-left");
const btnRight = document.getElementById("btn-right");

btnLeft.addEventListener("click", whenClicked);
btnRight.addEventListener("click", whenClicked);

function whenClicked(e) {
  if (e.currentTarget === btnLeft) {
    document.getElementById("img2").style.backgroundImage =
      "url('https://images.unsplash.com/photo-1494783367193-149034c05e8f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=diego-jimenez-A-NVHPka9Rk-unsplash.jpg')";
  } else alert("no click!");

}
.slide-container {
  display: flex;
}

.slide:nth-child(1) {
  background-image: url(../img/img1.jpg);
  height: 789px;
  width: 100%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide:nth-child(2) {
  background-image: url(../img/img2.jpg);
  height: 789px;
  width: 100%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#btn-left {
  position: absolute;
  top: 400px;
}

#btn-right {
  position: absolute;
  left: 1380px;
  top: 400px;
}
<div class="slide-container">

  <div class="slide" id="img1">
    <button id="btn-left"> <i class="fas fa-arrow-circle-left fa-3x " >left</i></button>
    <button id="btn-right"><i class="fas fa-arrow-circle-right fa-3x " >right</i></button>
  </div>

  <div class="slide" id="img2">

  </div>

</div>

* Редактировать: чтобы обратиться к комментарию о CSS, к нему обращаются CSS Правила специфичности . Что гласит:

Встроенные стили, добавленные к элементу (например, style = "font-weight: bold;"), всегда перезаписывают любые стили во внешних таблицах стилей, и, таким образом, их можно рассматривать как имеющие самый высокий специфичность.

При выполнении element.style.backgroundImage это создает встроенный стиль, который переопределяет. (за исключением того, что я думаю о !important правилах, которые вы почти никогда не должны использовать)

Чтобы решить вопрос о передаче события в обработчик событий: это очень полезный инструмент при использовании событий, называемый объект события

e.target невероятно полезен, когда вы хотите установить один и тот же обработчик событий для нескольких элементов и сделать что-то для всех из них, когда на них происходит событие.

Таким образом, объект события может быть назван почти как угодно. Вы можете назвать это e, event, evnt или как угодно. Но это даст вам доступ к большому количеству очень полезной информации, такой как target клика, координаты х / у клика и т. Д. c.

или в этом случае currentTarget , который немного отличается от target, дает нам доступ к элементу, к которому фактически подключен обработчик события. (здесь target, скорее всего, будет тегом i внутри тега button).

...