使用带有 <picture> 的滑块 js

Posted 2023-05-07

【中文标题】使用带有 <picture> 的滑块 js

【英文标题】：Using slider js with <picture>

【发布时间】：2022-01-03 06:59:26

【问题描述】：

我有一个小滑块，可以将preview 图像切换到main 图像。现在可以正常使用了

blade.php

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
      <div class="custom-carousel__title">
        @if($loop->first)
          <span> $article_block_image->title </span>
        @endif
      </div>
      @endforeach @endif
      @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
      <div class="main-image">
      @if($loop->first)
          <img src=" $article_block_image->main_image "  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
      @endif
      </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->preview_image "  title=" $article_block_image->image_title " data-title=" $article_block_image->title " data-main-src=" $article_block_image->main_image ">
        </div>
        @endforeach @endif
      </div>
    </div>
  </div>
</div>

js

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

但我还有一张图片mobile_image，我希望mobile_image 更改而不是main_image，最大尺寸为576px，为此我使用<picture>

我把我的代码改成这样

blade.php

<div class="main-image">
    @if($loop->first)
    <picture>
        <source srcset=" $article_block_image->mobile_image " media="(max-width: 576px)"  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
        <source srcset=" $article_block_image->main_image "  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
        <img src=" $article_block_image->main_image "  title=" $article_block_image->image_title " data-title=" $article_block_image->title ">
    </picture>
    @endif
</div>

js

$('.img-to-select__item').click(function () 
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  let mainSrc = $(this).children('img').data('main-src')
  let mobileSrc = $(this).children('img').data('mobile-src')
  let title = $(this).children('img').attr('title')
  let alt = $(this).children('img').attr('alt')
  $('.main-image > picture').html(`
    <source srcset="$mobileSrc" media="(max-width: 576px)"  title="$title">
    <source srcset="$mainSrc"  title="$title">
    <img src="$mainSrc"  title="$title">
  `);
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
);

但是看起来js代码有问题

GET http://test.loc/blog/%7B$mainSrc%7D 404（未找到）

【参考方案1】：

快速查看您的代码，我认为您的字符串插值正在破坏。

%7B 表示 和%7D 表示，因此您的代码没有正确解释您的变量。

那是因为$ 需要在大括号之外。

let example = $variable，不是$variable。

从外观上看，您正在使用一些 php 视图引擎和 javascript，这可能会让您有些困惑。在 PHP 中，您的视图引擎使用 $variable ，它将正确解释您在视图引擎中的 PHP 变量。

在 javascript 中，变量没有任何美元符号，但是当您使用带撇号的字符串插值时，您使用的变量需要使用 $variable 进行解释。

【讨论】：

真的，谢谢）