如何通过jQuery构建和使用ajax responseText来更改页面中的特定属性？

Question

我正在努力建立一个页面上的图片库。我有几个缩略图，这些缩略图链接到灯箱中传递的更大的图像。

我使用ajax调用来检查客户端是否是移动电话。如果是这样，我会得到一个ajax-response (我相信是一个字符串)，其中包含这个链接图像的移动版本的urls。

现在，我想在ajax .done()函数中构造/处理响应，以更改html页面中每个图像的href-attribut。

代码-html页面的代码片段(还有更多的图像。为了简单起见，我只显示了2。)：

<div class="imageGrid">
    <ul>
      <li>
        <a class='ajax-1' data-imagelightbox='f' href='/files/image1_big.jpg'>
          <img class='lazyload' 
                sizes='(min-width: 60em) 14vw,
                       (min-width: 30em) 29vw, 43vw'
                data-srcset='/files/image1_thmb_sm.jpg 138w, /files/image1_thmb_lg.jpg 276w' alt=''>
        </a>
      </li>
      <li>
        <a class='ajax-2' data-imagelightbox='f' href='/files/image1_big.jpg'>
          <img class='lazyload' 
                sizes='(min-width: 60em) 14vw,
                       (min-width: 30em) 29vw, 43vw'
                data-srcset='/files/image2_thmb_sm.jpg 138w, /files/image2_thmb_lg.jpg 276w' alt=''>
        </a>
      </li>
    </ul>
  </div>

ajax-call的代码：

<script>
  $(document).ready(function() {

    var screenIs = 'nonMobile';
    if(matchMedia('only screen and (max-width: 480px)').matches) {
      screenIs = 'mobile';
    }

    $.ajax({
      type: 'POST',
      url:  '_your_screen_is.php',
      data: { yourScreen: screenIs}
    })

    .done( function (responseText) {
      // Triggered if response status code is 200 (OK)
      if (responseText !== '') {

        // This code should somehow manage it to structure / process 
        // the responseText so that the right href-attr. is changed


        // I tested this: This would work if I just had one image 
        // with class=ajax and an responseText with one url      

        $('.ajax').attr('href', responseText);

      }
    })
  });
</script>

我从ajax-call中得到这个响应。我可以操作它-例如，我可以删除整个".ajax-“部分，而只有url。(但我猜这是一个字符串。)

.ajax-1: /files/image1_small.jpg,
.ajax-2: /files/image2_small.jpg,
..

感谢您的帮助和建议！

Answer 1

如果您打算加载基于移动设备的图像，那么您可能应该对您的体系结构进行一些更改，以便在知道图像是否在移动设备上之前不加载图像。

按照现在的结构方式，移动用户将加载非移动图像(因此使用数据)，然后图像将被换出，导致更多的数据使用(可能还有一些不太满意的移动用户)。

只需在您的页面上设置一个容器，进行ajax调用，并让它返回一个基于移动设备或不基于移动设备显示的图像列表，然后您就可以在容器中填充适合于查看设备的图像(并拥有满意的用户)。

如果您需要代码示例，请让我知道:)