Изменение изображения в блоке по щелчку

ProgramBox

Изменение изображения в блоке по щелчку

Post author:admin
Запись опубликована:29 июня, 2022
Post category:Вопросы по программированию

#javascript #jquery #laravel

Вопрос:

У меня есть блок, в котором должно произойти следующее, есть несколько img-to-select изображений, и когда вы нажимаете на него, оно должно стать main-image , и title оно также должно измениться, оно будет отличаться для всех изображений. И соответственно selected классу присваивается img-to-select__item класс

 <div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="title">
        <span>
          Title
        </span>
      </div>
      <div class="main-image">
        <img src="/img/company-a.jpg" alt="">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="/img/company-a.jpg" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="/img/company-b.jpg" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="/img/company-c.jpg" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="/img/company-d.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

Я понимаю, что это должно быть очень простой задачей, но я все еще слаб в js

И если я хочу использовать цикл, как мне все это настроить?

Я пробую это, но получается ерунда

 <div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="title">
        <span>
          Title
        </span>
      </div>
      @foreach($article_block_images as $article_block_image)
      <div class="main-image">
        <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
      </div>
      @endforeach
      <div class="img-to-select">
        @foreach($article_block_images as $article_block_image)
        <div class="img-to-select__item selected">
          <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
        </div>
        @endif
      </div>
    </div>
  </div>
</div>

Ответ №1:

Как насчет:

 document.querySelectorAll(".custom-carousel-section").forEach(carousel => {
    const title = carousel.querySelector(".title > span");
    const mainImage = carousel.querySelector(".main-image > img");
    
    carousel.addEventListener("click", e => {
        const img = e.target;
        if (img.tagName.toUpperCase() !== "IMG") { return; }
        if (!img.parentElement.classList.contains("img-to-select__item")) { return; }
        
        mainImage.src = img.src;
        
        const alt = img.a<
        title.textContent = a<
        mainImage.alt = a<
    });
});

 .custom-carousel .img-to-select {
  display: flex;
  justify-content: space-between;
}

 <div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="title">
        <span>
          Title
        </span>
      </div>
      <div class="main-image">
        <img src="https://placekitten.com/100/140" alt="Title">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://placekitten.com/100/140" alt="Title">
        </div>
        <div class="img-to-select__item">
          <img src="https://placekitten.com/150/140" alt="Another Title">
        </div>
        <div class="img-to-select__item">
          <img src="https://placekitten.com/130/140" alt="Testing">
        </div>
        <div class="img-to-select__item">
          <img src="https://placekitten.com/80/140" alt="Yet another title">
        </div>
      </div>
    </div>
  </div>
</div>

Ответ №2:

проверьте это, возможно, это вам поможет!

 $(".img-to-select__item").click(function () {
        $(".img-to-select__item").removeClass("selected");
        $(this).addClass("selected");
        $(".main-image>img").attr("src", $(this).children("img").attr("src"));
        $(".title>span").html($(this).children("img").attr("data-title"));
});

 .custom-carousel {
  text-align: center;
}
.main-image > img {
  width:50px;
}
.img-to-select > .img-to-select__item > img {
  heigh:30px;
  width: 30px;
}
.img-to-select {
  overflow: hidden; 
  display: flex; 
  justify-content:space-around;
}
.img-to-select > .img-to-select__item {
   display: flex; 
   justify-content:space-around;
}

.img-to-select > .img-to-select__item.selected {
   border: 2px solid red;
}

 <div class="custom-carousel-section">
    <div class="custom-container">
        <div class="custom-carousel">
            <div class="title">
                <span> Title 1 </span>
            </div>
            <div class="main-image">
                <img
                    src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs"
                    alt=""
                />
            </div>
            <div class="img-to-select">
                <div class="img-to-select__item selected">
                    <img
                        src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs"
                        data-title="Title 1"
                        alt=""
                    />
                </div>
                <div class="img-to-select__item">
                    <img
                        src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk"
                        data-title="Title 2"
                        alt=""
                    />
                </div>
                <div class="img-to-select__item">
                    <img
                        src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss"
                        data-title="Title 3"
                        alt=""
                    />
                </div>
                <div class="img-to-select__item">
                    <img
                        src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM"
                        data-title="Title 4"
                        alt=""
                    />
                </div>
            </div>
        </div>
    </div>
</div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Ответ №3:

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

Методы запроса элемента:

Для извлечения всех элементов изображения div: querySelectorAll

 const imgDivs = document.querySelectorAll('.img-to-select__item');

Для извлечения одного элемента изображения: querySelector

 const mainImg = document.querySelector('.main-image > img');

eventlistener’s:

-> Чтобы добавить событие щелчка на изображении: addEventListener()

 item.addEventListener('click', () => {getSelectedImage(item)}, false)

-> Чтобы удалить событие щелчка на изображении: removeEventListener()

 item.removeEventListener('click', getSelectedImage)

 // Selecting all the image div elements
const imgDivs = document.querySelectorAll('.img-to-select__item');

// Selecting the main image div element
const mainImg = document.querySelector('.main-image > img');

// Selecting title div element
const title = document.querySelector('.title > span');


//Remove the previous selected class name
const removePreviousSelection = (item) => {
  const selectedItem = document.querySelector('.img-to-select > .selected');
  selectedItem.classList.remove('selected');
}

// Applying main image src from the selected item src
const getSelectedImage = (item) => {
  removePreviousSelection()
  const img = item.querySelector('img');
  item.classList.add('selected')
  mainImg.src = img.src;
  mainImg.alt = img.a<
  title.textContent = img.src;
  
  //Remove event listener once done

  item.removeEventListener('click', getSelectedImage)
}

// Iterating all the image divs through forEach and adding event listener to each item
imgDivs.forEach(item => {
  item.addEventListener('click', () => {getSelectedImage(item)}, false)
})

 .main-image {
  padding: 20px;
  text-align: center;
}
.main-image img {
  width: 150px;
  height: 150px;
  border: 6px solid #000;
}

.img-to-select {
  display: flex;
}

.img-to-select .img-to-select__item img{
  margin: 20px;
  border: 4px solid #000;
  cursor: pointer;
  width: 100px;
  height: 100px;
}

.title {
  font: bold;
  padding: 10px
}

 <div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="title">
        <span>
          Title
        </span>
      </div>
      <div class="main-image">
        <img src="https://picsum.photos/id/237/200/300" alt="">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://picsum.photos/id/237/200/300" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="https://picsum.photos/seed/picsum/200/300" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="https://picsum.photos/200/300?grayscale" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="https://picsum.photos/200/300/?blur" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

1. Спасибо, все работает, но я завершил тему, пожалуйста, посмотрите

2. @meow, вы добавили теги как javascript и jquery, а теперь модифицируете код с помощью php-кода.. Как это будет правильный вопрос? Я не знаком с PHP и надеюсь, что дал четкий ответ на то, что вы спросили, связанное с javascript.

Ответ №4:

Я надеюсь, что это должно вам помочь

index.html

 <!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="title">
        <span>
          Title
        </span>
      </div>
      <div class="main-image">
        <img src="" alt="">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://picsum.photos/id/1/200/300" alt="image 1">
        </div>
        <div class="img-to-select__item">
          <img src="https://picsum.photos/id/2/200/300" alt="image 2">
        </div>
        <div class="img-to-select__item">
          <img src="https://picsum.photos/id/3/200/300" alt="image 3">
        </div>
        <div class="img-to-select__item">
          <img src="https://picsum.photos/id/4/200/300" alt="image 4">
        </div>
      </div>
    </div>
  </div>
</div>

<script src="main.js"></script>
</body>
</html>

main.js

 var main_image = document.querySelector('.main-image img')
var img_to_select = document.querySelectorAll('.img-to-select__item')
var title = document.querySelector('.title span')

for (var i = 0; i < img_to_select.length; i  ) {
  img_to_select[i].addEventListener("click", function() {
    // Get elements that have .selected class
    var current = document.getElementsByClassName("selected");
    // Remove the .selected class from siblings
    current[0].className = current[0].className.replace(" selected", "");
    // Append the .selected class to the current selected element
    this.className  = " selected";
    var current_selected_img = document.querySelector('.selected').firstElementChild
    // Set title with current selected image alt attribute
    title.textContent = current_selected_img.alt
    // Set main image src with current selected image src
    main_image.src = current_selected_img.src

  });
}