使用 jquery 更改背景图像 css 以从 foreachloop 中找到唯一的 src

Question

我有一个用于显示轮播数据的 foreach 循环。为了使每个图像显示唯一，我在循环内为每个 div 添加了一个 id。我没有使用 img 标签，而是使用 div 来保持图像大小一致而不扭曲图像。使用 jquery 我试图找到 div 的 id，找到 div 内的 img 和与此关联的唯一 src，然后获取该 src 并将其添加到父 divs css 作为背景图片。我目前将此变量 (imgSrc) 设为未定义。我如何使用 jquery 成功更改此 css？

$( document ).ready(function() {
  var imgId = $('.carosuelProperties').attr('id');
  var imgSrc = $(imgId).children('img').attr('src');
  console.log(imgSrc);
  $(imgId).css("background-image", "url(" + imgSrc + ")");
});

 @if (isset($participatingProperties) && !empty($participatingProperties) && is_array($participatingProperties))
    @foreach ($participatingProperties as $property)
    <a href="/view/property/{{ $property->property_slug or $property->id }}">  
      <div class="carousel__box itemProperties col-md-4 col-sm-12">
        <h2 class="propertyTitleCaro centered white sub-header">
            <?php echo mb_strimwidth(strip_tags($property->property_name), 0, 45, '...'); ?>   
        </h2>
        <p class="centered white smallerText propertyDesCaro"><?php echo mb_strimwidth(strip_tags($property->property_short_descript), 0, 140, '...<br><br>SEE MORE'); ?></p>
        <div class="carosuelProperties" id="{{ $property->id }}">
            <img class="caroImgClass" src="{{$property->property_main_image->images_main}}" alt="{{ $property->property_name or 'No name' }}" title="{{ $property->property_name or 'No name' }}">
        </div>
        </a>
    </div>
    @endforeach
    @endif

Answer 1

我认为你在第 3 行的选择器中犯了一个小错误。这样做:

var imgSrc = $('#'+imgId).children('img').attr('src');

编辑

这里甚至不需要 javascript。

@if (isset($participatingProperties) && !empty($participatingProperties) && is_array($participatingProperties))
@foreach ($participatingProperties as $property)
  <a href="/view/property/{{ $property->property_slug or $property->id }}">  
     <div class="carousel__box itemProperties col-md-4 col-sm-12">
        <h2 class="propertyTitleCaro centered white sub-header">
           <?php echo mb_strimwidth(strip_tags($property->property_name), 0, 45, '...'); ?>   
        </h2>
        <p class="centered white smallerText propertyDesCaro"><?php echo mb_strimwidth(strip_tags($property->property_short_descript), 0, 140, '...<br><br>SEE MORE'); ?></p>
        <div class="carosuelProperties" id="{{ $property->id }}" style="background-image: {{$property->property_main_image->images_main}};">
           <img class="caroImgClass" src="{{$property->property_main_image->images_main}}" alt="{{ $property->property_name or 'No name' }}" title="{{ $property->property_name or 'No name' }}">
        </div>
      </a>
    </div>
  @endforeach
@endif

您可以直接在样式属性中使用图像的属性。

Answer 2

您需要遍历旋转木马的每个元素，您的代码只更改第一张幻灯片，而不是所有幻灯片。

$(document).ready(function() {

    // Get all elements
    $('.carosuelProperties').each(function() {

        // Set the reference to the current element
        var current = $(this);

        // Find the image
        var image = current.find('img');

        // Set the background image
        current.css('background-image', 'url(' + image.attr('src') + ')');

    });

});

使用 jquery 更改背景图像 css 以从 foreachloop 中找到唯一的 src

changing background image css using jquery to find unique src from foreachloop

css

jquery

blade