更改影像樣式和標題

我是 javascript 和 jquery 的新手。單擊下面的影像時如何更改主影像，并更改每個影像的標題？

我設法改變了圖片，但我還想添加樣式，這些樣式也會改變所有內容并被標題卡住

$('.img-to-select__item').click(function () {
  $('.main-image > img').attr('src', $(this).children('img').attr('src'));
});

.custom-slider {
  text-align: center;
}
.main-image > img {
  margin-top: 5px;
  width: 50px;
  border-radius: 100px;
  box-shadow: 0 0 0 3px pink, 0 0 13px #333;
}
.img-to-select > .img-to-select__item > img {
  width: 30px;
  border-radius: 100px;
  height: 100%;
}
.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 {
   height: 100%;
   border-radius: 100px;
   border: 3px solid pink; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="custom-slider-section">
  <div class="custom-container">
    <div class="custom-slider">
      <div class="custom-slider__title">
        <span>Title
        </span>
      </div>
      <div class="main-image">
        <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/732/200/300.jpg?hmac=mBueuWVJ8LlL-R7Yt9w1ONAFVayQPH5DzVSO-lPyI9w">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/230/200/300.jpg?hmac=pyhlpgJN2oBeEzhJbnJYrCsLoJM6MKd_NUQGIQhVx5k">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/377/200/300.jpg?hmac=veEWg3ApI7rkKqMF6MuaWBmxPgnEe-Ar9eDdMG3q-kk">
        </div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

要更改樣式，請使用addClass和removeClass。而對于標題，只需添加一個新的屬性，它會隨著圖片而改變

$('.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'));
  $('.custom-slider__title > span').html($(this).children('img').attr('data-title'));
});

.custom-slider {
  text-align: center;
}
.main-image > img {
  margin-top: 5px;
  width: 50px;
  border-radius: 100px;
  box-shadow: 0 0 0 3px pink, 0 0 13px #333;
}
.img-to-select > .img-to-select__item > img {
  width: 30px;
  border-radius: 100px;
  height: 100%;
}
.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 {
   height: 100%;
   border-radius: 100px;
   border: 3px solid pink; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="custom-slider-section">
  <div class="custom-container">
    <div class="custom-slider">
      <div class="custom-slider__title">
        <span>Title 1
        </span>
      </div>
      <div class="main-image">
        <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ" data-title="Title 1">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ" data-title="Title 1">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/732/200/300.jpg?hmac=mBueuWVJ8LlL-R7Yt9w1ONAFVayQPH5DzVSO-lPyI9w" data-title="Title 2">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/230/200/300.jpg?hmac=pyhlpgJN2oBeEzhJbnJYrCsLoJM6MKd_NUQGIQhVx5k" data-title="Title 3">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/377/200/300.jpg?hmac=veEWg3ApI7rkKqMF6MuaWBmxPgnEe-Ar9eDdMG3q-kk" data-title="Title 4">
        </div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

添加標題：

$(".custom-slider__title span").text($(this).children('img').data("title"));

向主影像添加類

$('.main-image > img').addClass("my-class");

從主影像中洗掉一個類

$('.main-image > img').removeClass("my-class");

這些命令可以鏈接起來。IE

$('.main-image > img').attr('src', $(this).children('img').attr('src')); }).removeClass("old-class").addClass("new-class");

標籤：javascript html jQuery css

上一篇：API中的System.AggregateException“無法構造某些服務”

下一篇：為什么xmlhttprequest回應在html代碼中