jQuery如何从变量中选择值

Question

如果我的变量中有~15个值(例如图像)，那么是否可以通过单击将该变量的第一个值输出到div中？如果我再次单击，从该变量中选择第二个值？我似乎找不到关于这件事的任何东西。

瓦

var images = [
  'dali.jpg',
  'illusionisme.png',
  'impresionisme.jpg',
  'popart.jpg',
  'abstracter.jpg',
]

单击，但这会将所有变量放入.art div中。

$(".art").click(function(){
  $(".art").each(function(){
    $(this).find("img").remove();
    $(this).prepend('<img src="assets/images/' + images + '">');
  });
});

Answer 1

有很多方法可以做到这一点。但你可以试试这个

var index = 0;
    $(".art").click(function(){
        $(".art").each(function(){
            $(this).find("img").remove();
            $(this).prepend('<img src="assets/images/' + images[index] + '">');
        });
                    index++;
    });

这段代码要做的是，它将从0开始，这是数组中的第一项。然后，每次单击时，它都会将您的图像名称放在image属性中，并增加index，以便下一次单击它时，它将加载下一个文件。

如果希望图像在最后一个图像之后旋转，那么将index++;替换为以下代码：

if(index < images.length-1 ){
            index++;
        }
        else{
            index = 0;
        }

Answer 2

与其删除和重新追加img，只需更改它的属性

演示

var images = [/*...*/];
var n = images.length;
var i = 0;
$(".art").click(function(){
    $('img', this)[0].src = "assets/images/"+ images[++i%n] ;
});

由于有了提醒操作符%，您可以无限循环您的图像数组

如果您想要将图像更改为每个.art 元素，那么您可以这样做：

​

演示

var images = [/*...*/];
var n = images.length;
var i = 0;                   // Index counter
var $art = $('.art');        // Cache your elements!

$art.click(function(){
  ++i;                       // Pre-increment our counter (once) on click.
  $art.each(function(idx){   // Get element's index into idx
    $('img', this)[0].src = images[(i+idx) % n] ; // Change src and loop
  });
});