在塊中集成欄位

我有一個塊，單擊時主圖片會發生變化

$('.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-carousel__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="custom-carousel__title">
        <span>Title
        </span>
      </div>
      <div class="main-image">
        <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

但我無法將整個事情整合到網站資料下。

所以我正在嘗試這樣做，但事實證明selected該類已添加到所有img-to-select__items. 并且所有的main-images都顯示出來，但應該只有一個

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="custom-carousel__title">
        <span>
          Title
        </span>
      </div>
      @if(!empty($article_block_images)) @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 @endif
      <div class="img-to-select">
        @if(!empty($article_block_images)) @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>
        @endforeach @endif
      </div>
    </div>
  </div>
</div>

這里我main_image到處都用，但假設我有另一preview_image張圖片，我想在這個塊中使用它

@if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
        <div class="img-to-select__item selected">
          <img src="{{ $article_block_image->preview_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
        </div>
        @endforeach @endif

但是如果我現在這樣做，那么這張圖片將成為主要的并相應地改變，我需要選擇是preview_image并且只會main_image改變

預覽圖和主圖一樣，只是大小不同

uj5u.com熱心網友回復：

在第二個@foreach 中試試這個，在那里你使用“selected”類，按索引檢查 $loop，對于第一個元素，例如，應用這個類

 <div class="custom-carousel-section">
      <div class="custom-container">
        <div class="custom-carousel">
          <div class="custom-carousel__title">
            <span>
              Title
            </span>
          </div>
          @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
          <div @if ($loop->first) class="main-image"@else  style="display: none" @endif>
            <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 @endif
          <div class="img-to-select">
            @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
            <div @if ($loop->first)class="img-to-select__item  selected" @else class="img-to-select__item" @endif>
              <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 @endif
          </div>
        </div>
      </div>
    </div>

https://laravel.com/docs/8.x/blade#the-loop-variable關于它的 laravel 檔案

標籤：javascript html 查询 拉拉维尔

上一篇：單擊時更改HTML

下一篇：無法決議API值