Javascript 通过函数更改背景图像url（Jquery）

问题:

比如说，我有一组链接图像：

变量图像=[[https://samplelink.com/2014/01.jpg], [https://samplelink.com/2014/02.jpg], [https://samplelink.com/2014/03.jpg]]

当我单击按钮时，我想从数组中的链接中随机选择一个新的背景图像：

函数random{number=Math.floorMath.random*3； 返回编号；}

我试着这样做：

var urlStr = '"url()"';
var toArr = urlStr.split("");        //so that I could insert the url inside the "url(+here+)"
var toStr, clean;

$('.new').click(function() {
$('.background').css("background-image", function() {
  toArr.splice(5,0,[photoSelect()]); // ig. [",u,r,l,(,"https://samplelink.com/2014/01.jpg",),"]
  toStr= toArr.toString();           // ig. ",u,r,l,(,"https://samplelink.com/2014/01.jpg",),"
  clean = change.replace(/[,]/g,""); // ig. "url("https://samplelink.com/2014/01.jpg")"
  return clean;
});
});

诚然，我是新来的，自学成才，我会感谢任何帮助或纠正。 我想还有其他更好的方法可以做到这一点，但我想我还是会试试看，在发布之前我已经检查了相关的问题，但到目前为止，我还没有找到任何与我的问题相匹配的，所以我想知道这是否可行。

JS:

---

工作小提琴：

您的实现已接近尾声，但正如评论中所述，您对此有点过虑了。您不需要任何数组来存储图像，当附加值是静态的时，也不需要将字符串拼接在一起。另外，当随机选择数字时，最好使用imageList的长度，而不是硬编码的值，以防以后更改。看看这个简短的例子

var imageList=['http://lorempixel.com/400/200/?1', 'http://lorempixel.com/400/200/?2', 'http://lorempixel.com/400/200/?3']; 函数随机选择{ var ranNumber=Math.floorMath.random*imageList.length； 返回图像列表[ranNumber]； } $'.newBtn'。单击函数{ $'.randomImg'.cssbackground图像，url'+randomPhotoSelect+'； }; .随机抽样{ 高度：200px； 宽度：400px； } 新图像首先：

是一个数组，由数组组成，数据不需要它。你会想要：

var images = [ 
                 "https://samplelink.com/2014/01.jpg", 
                 "https://samplelink.com/2014/02.jpg", 
                 "https://samplelink.com/2014/03.jpg"
];

这是一个字符串数组

接下来，您的代码要获得随机数，请从数组中选择一个元素，并使用该元素设置图像，然后将其组合成一个简单的函数

因此，要获得一个随机图像并将其用作元素的背景，您只需：

var el=document.getElementByIdtheElement； var btn=document.querySelectorbutton； btn.addEventListenerclick，photoSelect； var图像=[ http://www.underconsideration.com/brandnew/archives/abc_2013_logo.png, http://logok.org/wp-content/uploads/2014/03/CBS-Eye-logo-880x660.png, https://www.famouslogos.net/images/nbc-logo.jpg ]; 函数photoSelect{ el.style.backgroundImage=url+images[Math.floorMath.random*3]+； 控制台。清除； console.logel.style.backgroundImage； } 元素{ 高度：100px； 宽度：100px； 背景：灰色； 背景尺寸：包含； } 单击以查看随机图像

---

退后一分钟。var图像=[[https://samplelink.com/2014/01.jpg], [https://samplelink.com/2014/02.jpg], [https://samplelink.com/2014/03.jpg]]是一个数组，由数组组成，数据不需要它。您需要：var images=[https://samplelink.com/2014/01.jpg, https://samplelink.com/2014/02.jpg, https://samplelink.com/2014/03.jpg]这是一个字符串数组。您从哪里获取图像？为什么图像字符串用[和]包装？现在您编辑了您的问题，使函数无法再工作。为什么您的图像阵列看起来不是这样：[https://samplelink.com/2014/01.jpg, https://samplelink.com/2014/02.jpg, https://samplelink.com/2014/03.jpg]哇-事情太复杂了！！！$”。新的“.onclick，函数{$'.background'.cssbackground image，url+photoSelect+；假设字符串数组现在可以工作了，谢谢@mplungjan。我真不敢相信这个解决方案有多简单。我不知道我可以在url中添加photoSelect而不将其转换为字符串。现在我知道了。谢谢！这在这里或在你的小提琴中都不起作用。这到底是什么？\u imagesLength-0+0你可以从0到数组长度进行数学运算。随机；你的加减0没有任何作用！！！Math.floorMath.random*images.length效果很好。把我的评论拿出来回答，而不是让OP删除这个可怜的问题。如果，我没有看到你在摆姿势之前的评论，还有通过添加url，这似乎是一个常见的思维过程。然而，事后看来，我确实明白了你的观点。如果你坚信这不会增加任何内容，我当然愿意删除答案。var el=document.getElementByIdtheElement；var btn=document.querySelectorbutton；btn.addEventListenerclick，photoSelect；bla bla bla bla bla bla，而不是$'.new'单击，函数{$'.background.cssbackground image，url+photoSelect+；@mplungjan我想你把击键和质量混淆了。OP很明显是混淆了。这段代码可能有更多的击键，实际上由于删除了不必要的函数，它不那么复杂，但它简单易懂。仅仅因为OP标记JQuery并不意味着JQu我认为你把过度的抱怨和刚刚管理好的混乱混为一谈

---

学习简单的jQuery语法，然后将DOM和事件侦听器混合到这个简单的东西中！我的代码基于OPs代码。你的是一个完全重写使用完全不同的methods@mplungjan好吧，我们不同意。那你在这里就没什么可看的了。往前走。@mplungjan我应该为此感谢你吗？你没有投票否决我，但出于某种原因你在责骂我。你既不喜欢我的答案，也不喜欢别人的答案，你已经表明了你的观点。是时候离开去打扰别人了。

var images = [["https://samplelink.com/2014/01.jpg"], ["https://samplelink.com/2014/02.jpg"], ["https://samplelink.com/2014/03.jpg"]]

var photoSelect = function() {

    var _imagesLength = images.length;
  var selectedImage = parseInt(Math.random() * (_imagesLength - 0)) + 0;

  return images[selectedImage];

}
$(document).ready(function() {
    $('.background').css("background-image", "url("+photoSelect()+")");
  $('.new').on("click",function() { 
    $('.background').css("background-image", "url("+photoSelect()+")");

  });
})

var images = [ 
                ["https://samplelink.com/2014/01.jpg"], 
                ["https://samplelink.com/2014/02.jpg"], 
                ["https://samplelink.com/2014/03.jpg"]
];

var images = [ 
                 "https://samplelink.com/2014/01.jpg", 
                 "https://samplelink.com/2014/02.jpg", 
                 "https://samplelink.com/2014/03.jpg"
];