使用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

以下是展示上述data-src和data-image属性的HTML代码：https://image.prntscr.com/image/n1ME_XpXShifytEOfFVV8w.png

Answer 1

更新

评论了3个应该有助于操作Squaresoft图像的替代jQuery语句（未经测试，因为我没有Squaresoft网站）

<小时/> 您可以取消引用jQuery对象以使其成为普通对象...

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

...并使用.src之类的简单属性来操纵值。

参考：Fisher-Yates Shuffle

有关详细信息，请参阅演示中的评论

演示

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;