Как выбрать data атрибуты по значению

209

11 июня 2017, 19:50

На странице несколько блоков с data-атрибутом

<div data-ajax="value1"></div>
...
<div data-ajax="value2"></div>
...
<div data-ajax="valueN"></div>

Есть вот такой код

var LoadOnScreen = function () {
jQuery(window).scroll(function() {
    var $block = jQuery('[data-ajax="value1"]');
    var $data = $block.data('product');
    if (jQuery(window).scrollTop() + jQuery(window).height() >= $block.offset().top) {
        if(!$block.attr('loaded')) {
            $block.attr('loaded', true);
            RunSpinner(); // show Spinner
            setTimeout(function () {
                jQuery.ajax({
                    url: "/url/to/" + $block + "/" + $data,
                    type: "get",
                    dataType: "html",
                    success: function (template) {
                        StopSpinner(); // hide the spinner
                        $block.html(template);
                    },
                    error: function (error) {
                        $block.html("<p>Произошла ошибка при получении данных</p>");
                    }
                });
            }, 1000);
        }
    }
});

};

Когда блок появился на экране, посылается аякс запрос. Если просто оставить data-ajax без значения, то при появлении первого блока с этим атрибутом, он посылает запрос для всех блоков.

Вопрос в том, как можно динамически подставить значение в дата атрибут? Примерно так jQuery('[data-ajax="' + value + '"]');, а потом как нибудь проверить значение атрибута, и послать аякс запрос?

Answer 1

Если я вас правильно понял, то вам всего-навсего требовалось правильно выбирать блоки, для которых посылать ajax-запросы. Это можно обеспечить с помощью .grep():

function showDisplayingBlocks() { 
  // получаем список требуемых для загрузки блоков 
  let blocks = $.grep($('div[data-ajax]'), function(el) { 
    // проверяем на то, загружен ли блок 
    let loaded = $(el).data('loaded'); 
    if (loaded) 
      return false; 
 
    // проверяем на отображение блока во вьюпорте 
    let elementOffset = $(el).offset().top; 
    let elementHeight = $(el).height(); 
    let windowOffset = $(window).scrollTop(); 
    let windowHeight = $(window).height(); 
    if (windowOffset > elementOffset + elementHeight) 
      return false; 
    if (windowOffset + windowHeight < elementOffset) 
      return false; 
    return true; 
  }); 
 
  // отправляем ajax-запросы для всех требуемых блоков  
  $(blocks).each(function() { 
    let el = $(this); 
    el.html('Loading...'); 
    el.data('loaded', true); 
    let ajaxData = el.data('ajax'); 
 
    // имитация ajax-запроса 
    setTimeout(function() { 
      el.html('<span>3</span>'); 
      setTimeout(function() { 
        el.html('<span>2</span>'); 
        setTimeout(function() { 
          el.html('<span>1</span>'); 
          setTimeout(function() { 
            el.html('Loaded ' + ajaxData); 
          }, 1000); 
        }, 1000); 
      }, 1000); 
    }, 1000); 
  }); 
} 
 
$(document).ready(showDisplayingBlocks); 
$(document).scroll(showDisplayingBlocks);

div { 
  height: 300px; 
  line-height: 300px; 
  text-align: center; 
} 
 
span { 
  font-size: 60px; 
} 
 
div:nth-child(2n + 1) { 
  color: white; 
  background-color: black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-ajax="value1"></div> 
<div data-ajax="value2"></div> 
<div data-ajax="value3"></div> 
<div data-ajax="value4"></div> 
<div data-ajax="value5"></div> 
<div data-ajax="value6"></div>