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

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

setParameterValues

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

2 个答案: