すべてのimgにランダムなクラスを割り当てます

Question

今、このコードはすべてのimgに同じランダムクラスを与えます。
どのように画像ごとに異なるランダムなクラスを与えることができますか？

ありがとうございました。

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

あなたはそれぞれのimgが固有のランダムなクラスを持っているしたい場合は、セットから配列を作成することができます

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

.img1{height:10px} 
 
.img2{height:40px} 
 
.img3{height:70px} 
 
.img4{height:100px} 
 
.img5{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">

Answer 2

ループ、ランダム生成し、割り当てる：

$(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 3

問題は、単一の乱数を生成してすべての画像に適用するだけであるためです。その代わりに、addClass()メソッドに関数を提供し、一致した各要素をループし、各反復で乱数を生成します。

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

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

ドル記号機能すべてのimg要素を含むjQueryオブジェクトに引数の要素タグをラップします。特別なjQueryメソッドを使用すると、要素のインデックスとdom要素を渡す各jQueryコレクションの関数を呼び出します。 dom要素に対して.addClassを使用するにはjQueryコレクションにラップする必要があります。 個々の要素を割り当てるには、jQuery .eachメソッドを使用します。

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

Answer 5

いい質問は、ループを使用して忘れないでください、それはあなたがそこに唯一欠けていることだ、あなたはすでにjQueryのを使用している場合、これを試してみて、すべての作業がすべきforループのような簡単なJavaScriptのループを使用するか、それぞれの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); 
    }); 
    }); 

すべての作業は、それが役に立てば幸い！