Как я могу объединить эти две функции в одну?

Question

У меня есть div с изображением и div с текстом. При наведении курсора на изображение оно меняет оттенки серого, а при наведении курсора на текст меняет непрозрачность. Как можно объединить код js, чтобы при наведении курсора на изображение или текст изменялись и оттенки серого изображения, и непрозрачность текста?

      <div class="images">
        <img src="/photographs/FootballTeam.jpg" />
        <div class="image_description">The team. 14/07/17</div>
      </div>

var images = document.querySelectorAll("#photos > .images > img");
for (var i = 0; i < images.length; i++) {
  images[i].style.transitionDuration = "0.1s";
  images[i].addEventListener("mouseenter", function() {
    if (this.style.filter === "grayscale(100%)") {
      this.style.filter = "grayscale(0%)";
    } else {
      this.style.filter = "grayscale(100%)";
    }
  });
}

var images = document.querySelectorAll(
  "#photos > .images > .image_description"
);
for (var i = 0; i < images.length; i++) {
  images[i].style.transitionDuration = "0.1s";
  images[i].addEventListener("mouseenter", function() {
    if (this.style.opacity === "0") {
      this.style.opacity = "1";
    } else {
      this.style.opacity = "0";
    }
  });
}

Answer 1

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

.images {
  position: relative;
  width: 500px;
  height: 300px;
}

.images img {
  width: 100%;
  height: 100%;
  
  /* Your properties */
  transition: .25s; /*(.1s is too fast)*/
}

.images .image_description {
  /* Get it to place */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
  
  /* Some style */
  color: white;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0px 0px 5px black;
  
  /* Your properties */
  opacity: 0;
  transition: .25s;
}


/* Image hover event */
.images:hover img {
  filter: grayscale(1);
}

/* Description hover event */
.images:hover .image_description {
  opacity: 1;
}

<div class="images">
  <img src="https://natgeo.imgix.net/factsheets/thumbnails/01-balance-of-nature.adapt.jpg"/>
  <div class="image_description">the nature</div>
</div>
I'm not owner of the image.

Answer 2

Вот мой ответ:

//Get all images containers
var images = document.querySelectorAll("#photos > .images");

//Loop every container
for (var i = 0; i < images.length; i++) {
    //set variables for code readability
    let container = images[i];
    let description = self.querySelectorAll(".image_description")[0];

    //set transition durations
    container.style.transitionDuration = "1s";
    description.style.transitionDuration = "1s";

    //add mouse events
    container.addEventListener("mouseenter", function() {
        container.style.filter = "grayscale(100%)";
        description.style.opacity = "0";
    });
    container.addEventListener("mouseleave", function() {
        container.style.filter = "grayscale(0%)";
        description.style.opacity = "1";
    });
}

Answer 3

Я предлагаю следующие изменения в вашем коде:

var imageContainers = document.querySelectorAll("#photos > .images");
imageContainers.forEach(imageContainer => {
   imageContainer.addEventListener('mouseenter', () => {
      imageContainer.classList.toggle('grayscale')
   });
})

А затем, в вашем css:

  #photos .images > * {
    transition: 0.5s;
  }

  #photos .images > img {
      filter: grayscale(0%);
  }

  #photos .images.grayscale > img {
      filter: grayscale(100%);
  }


  #photos .images > .image_description {
      opacity: 0;
  }


  #photos .images.grayscale > .image_description {
      opacity: 1;
  }

Answer 4

Надеюсь, у вас нет такого же изображения и соответствующего им текста здесь. Итак, просто попробуйте приведенный ниже код и вернитесь назад -

var images = document.querySelectorAll("#photos > .images > img");
 var imagesWithDesc = document.querySelectorAll(
  "#photos > .images > .image_description"
);

for (var i = 0; i < images.length; i++) {
  images[i].style.transitionDuration = "0.1s";
  images[i].addEventListener("mouseenter", function () {
    if (this.style.filter === "grayscale(100%)") {
      this.style.filter = "grayscale(0%)";
    } else {
      this.style.filter = "grayscale(100%)";
    }
  });
  imagesWithDesc[i].style.transitionDuration = "0.1s";
  imagesWithDesc[i].addEventListener("mouseenter", function () {
    if (this.style.opacity === "0") {
      this.style.opacity = "1";
    } else {
      this.style.opacity = "0";
    }
  });
}