javascript - 使用 jQuery 更改 SquareSpace 上的图像

Question

在 Squarespace 中更改图像时遇到问题。我已经非常接近了，但我还没有解决问题。

我正在尝试生成一个随机数，使用该数字从我的图片数组中挑选一张照片，并用该图像替换我画廊的背景。

我的 jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
 $(document).ready( function() { 
    const index = randomMove(0, pictures.length),
    picture = pictures[index];

   // Gets the img tag under the imageWrapper class
   const test = $('.imageWrapper > img');
   // Gets the first index of the div (the image I want to manipulate)
   const test1 = test[0];
   // trying to change the picture
   // I have tried attr('src', picture) as well and did not work
   const test2 = $(test1).data("currentSrc", picture);
 })

 const randomMove = (mi, ma) => {
  const min = Math.ceil(mi),
    max = Math.floor(ma),
    selection = Math.floor(Math.random() * (max - min) + min);

  return selection;
};

  const pictures = [
    "https://i.imgur.com/bsG8hx7.jpg",
    "https://i.imgur.com/Vuw28Lq.jpg",
    "https://i.imgur.com/09Cfuks.jpg",
    "https://i.imgur.com/3TRmorT.jpg",
    "https://i.imgur.com/JElBKPO.jpg",
    "https://i.imgur.com/eSTVz8D.jpg",
    "https://i.imgur.com/3n1z9uc.jpg",
    "https://i.imgur.com/aW5HWI5.jpg",
    "https://i.imgur.com/5uEtErN.jpg",
    "https://i.imgur.com/HMHehUy.jpg"
  ];
 </script>

我认为这个问题的最大挑战是 HTML 使用“data-src”和“data-image”，而不是仅仅使用“src”。这也可能不是解决此问题的正确方法。

这是我的错误日志:https://image.prntscr.com/image/JaArgLTOT0WHY0oCkVdPCA.png

这是展示上述数据源和数据图像属性的 HTML 代码:https://image.prntscr.com/image/n1ME_XpXShifytEOfFVV8w.png

Answer 1

更新

评论了 3 个有助于操作 Squaresoft 图像的替代 jQuery 语句(未经测试，因为我没有 Squaresoft 站点)

---

您可以取消引用您的 jQuery 对象，使其成为普通对象...

$('.imageWrapper img')[0].src

...并使用像 .src 这样的简单属性来操作这些值。

引用:Fisher-Yates Shuffle

详情见演示中的评论

演示

$(function() {
  const pictures = [
    "https://i.imgur.com/bsG8hx7.jpg",
    "https://i.imgur.com/Vuw28Lq.jpg",
    "https://i.imgur.com/09Cfuks.jpg",
    "https://i.imgur.com/3TRmorT.jpg",
    "https://i.imgur.com/JElBKPO.jpg",
    "https://i.imgur.com/eSTVz8D.jpg",
    "https://i.imgur.com/3n1z9uc.jpg",
    "https://i.imgur.com/aW5HWI5.jpg",
    "https://i.imgur.com/5uEtErN.jpg",
    "https://i.imgur.com/HMHehUy.jpg"
  ];

  // Callback function pass an array
  function changeImg(array) {

    // Pass the array to shuffle function get result
    var url = shuffle(array);

    /* Asign the result to src attribute of img
    || Note: the bracket notation [0]
    || this dereferences the jQuery Object, thus
    || changing it into a plain object
    || Once a plain object, simple properties
    || such as .src may be used.
    */
    $('.imageWrapper img')[0].src = url;

    // This is the equivelant in jQuery
    // $('.imageWrapper img').attr('src', url);

    /* Solution for Squaresoft images */
    /* This should work granted that the array pictures has
    || the appropriate urls pointing to images uploaded to
    || the site.
    */
    /* ALT 1. All attributes grouped
       $('.imageWrapper img').attr({
         'src': url+'?format=1500w',
         'data-src': url,
         'data-image': url
       });
    */
    /* ALT 2. attr() and .data() chained
       $('.imageWrapper img').att('src', url+'?format=1500w').data({'src': url, 'image':url});
    */
    /* ALT 3. Dereferenced jQObj and plain JavaScript
       $('.imageWrapper img')[0].src = url+'?format=1500w';
       $('.imageWrapper img')[0].setAttribute('data-src', url);
       $('.imageWrapper img')[0].setAttribute('data-image', url);
    */
  }


  // Fisher-Yates Shuffle 
  // https://stackoverflow.com/a/962890/2813224
  function shuffle(array) {
    var i = 0,
      j = 0,
      temp = null;

    for (i = array.length - 1; i > 0; i -= 1) {
      j = Math.floor(Math.random() * (i + 1))
      temp = array[i]
      array[i] = array[j]
      array[j] = temp
    }
    return array[j];
  }

  // Added for demo purposes
  $('button').on('click', function() {
    changeImg(pictures);
  });

});

<button>Change Image</button>
<section class='imageWrapper'>
  <img src='https://i.imgur.com/bsG8hx7.jpg'>
</section>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>