изменение фонового изображения css с помощью jquery для поиска уникального src из foreachloop - PullRequest
Новая
       18

изменение фонового изображения css с помощью jquery для поиска уникального src из foreachloop

0 голосов
/ 16 мая 2018

У меня есть цикл foreach, который отображает данные для карусели.Чтобы сделать каждое изображение уникальным, я добавил идентификатор для каждого элемента внутри цикла.Вместо использования тегов img я использовал div, чтобы сохранить размер изображения постоянным, не искажая изображение.Используя jquery, я пытаюсь найти идентификатор div, найти img внутри div и уникальный src, связанный с этим, а затем взять этот src и добавить его в родительский div css в качестве фонового изображения.В настоящее время я получаю эту переменную (imgSrc) как неопределенный.Как мне успешно изменить этот CSS с помощью JQuery? 

$( 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

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Вам нужно пройти по каждому элементу карусели, ваш код просто меняет первый слайд, а не все слайды. 

$(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') + ')');

    });

});
0 голосов
/ 16 мая 2018

Я думаю, что вы допустили небольшую ошибку в своем селекторе в строке 3. Сделайте так: 

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

EDIT

Здесь вам даже не понадобится 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

Вы можете использовать свойство вашего изображения непосредственно в атрибуте стиля.

...