Question

现在这段代码为所有imgs提供了相同的随机类。
我如何在每张图像上给出不同的随机类？

感谢您的帮助。

$(document.body).ready(function () {
    bgImageTotal = 5;
    randomNumber = Math.round(Math.random() * (bgImageTotal - 1)) + 1;
    $('img').addClass('img' + randomNumber);
});

.img1{max-height:10px}
.img2{max-height:40px}
.img3{max-height:70px}
.img4{max-height:100px}
.img5{max-height:130px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">

Answer 1

循环，生成随机，赋值：

$(document.body).ready(function () {
    var bgImageTotal = 5;
    $('img').each(function() {
        var randomNumber = Math.round(Math.random() * (bgImageTotal - 1)) + 1;
        $(this).addClass('img' + randomNumber);
    });
});

您的问题是$('img')将返回所有图片 - 之后，您必须将它们循环并分别为每个图像分配。

Answer 2

问题是因为您只生成一个随机数并将其应用于所有图像。相反，为addClass()方法提供一个函数，然后循环遍历每个匹配的元素并在每次迭代中生成一个随机数。

＆＃13;

$(document.body).ready(function() {
  bgImageTotal = 5;
  $('img').addClass(function() {
    return 'img' + (Math.round(Math.random() * (bgImageTotal - 1)) + 1);
  });
});

＆＃13;

.img1 { max-height: 10px; }
.img2 { max-height: 40px; }
.img3 { max-height: 70px; }
.img4 { max-height: 100px; }
.img5 { max-height: 130px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">

＆＃13;

Answer 3

如果您希望每个img都具有唯一的随机类，则可以从集合中创建一个数组：

＆＃13;

$(document.body).ready(function () {
    var $imgs = $('img');
    var len = $imgs.length;
    
    var set = new Set;
    while (set.size != len) {
        set.add((Math.random() * len | 0) + 1);
    }
    var arr = [...set];
    $imgs.each(function(pos) { $(this).addClass('img' + arr[pos]) });
});

＆＃13;

.img1{height:10px}
.img2{height:40px}
.img3{height:70px}
.img4{height:100px}
.img5{height:130px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">

＆＃13;

Answer 4

好问题，不要忘记使用循环，这是你在那里唯一缺少的东西，你可以使用简单的javascript循环，如for循环或使用jQuery，如果你已经使用jQuery，试试这个，应该所有的工作：

你的CSS：

.img1{max-height:10px}
.img2{max-height:40px}
.img3{max-height:70px}
.img4{max-height:100px}
.img5{max-height:130px}

你的HTML：

<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">
<img src="http://i.imgur.com/YeDYzSR.png">

和你Js（jQuery）：

"use strict";
  $(document).ready(function(){
  // in jQuery, you can select by ID, Class, Tag, etc... this a tag selector, selecting all <img> tag on your page 
    $('img').each(function(i, e) {
       var imgNo = Math.floor(Math.random() * i + 1);
         $(this).addClass('img' + imgNo);
    });
  });

一切正常，希望有所帮助！

Answer 5

美元符号函数将参数元素标记包装到一个jQuery对象中，该对象包含所有img元素以及特殊的jQuery方法，该方法在传递元素索引和dom元素的每个jQuery集合上调用一个函数。在dom元素上使用.addClass。它必须包装在jQuery集合中。要分配单个元素，请使用jQuery .each方法。

    $('img).each(function(index, element){
      $(element).addClass('img' + randomNumber);
    })

为每个img

5 个答案: