javascript - JavaScriptで画像を動的に追加する方法

Question

行の列にフラグ変数の条件に従って画像を追加したい。innerHtml を使用できないか、画像オブジェクトも使用すると正しく機能しません。行は動的に作成されるため、どのように解決できるか混乱しています。フラグがtrueの場合、画像が表示されます。それ以外の場合、画像は表示されません。

Answer 1

私は、多くのことをより高速に実行できるjQueryを使用することを好みます。

これがどのように機能するかを理解できる例を次に示します。フラグは自分で追加できます。

HTML:

<div id="myDiv">
    <img src="http://nonsensesociety.s3.amazonaws.com/images/posts/marie-kazvan/2.jpg" alt="2.jpg" />
    <img src="http://nonsensesociety.s3.amazonaws.com/images/posts/marie-kazvan/18.jpg" alt="18.jpg" />
    <img src="http://nonsensesociety.s3.amazonaws.com/images/posts/marie-kazvan/6.jpg" alt="6.jpg" />
</div>

CSS:

#myDiv { margin:10px; text-align:center; border:1px solid #ddd; }

#myDiv tr td { width:100px; height:60px; cursor:pointer; border:1px solid #ddd; }

#myDiv tr td:hover { background-color:navy; color:#fff; }

jQuery:

$(document).ready(function () {
    var myElements = "",
        myColumns = 5,
        myRows = 7,
        myImageArray = new Array(),
        randomLength = $('#myDiv img').length;
    $('#myDiv img').each(function() {
        myImageArray[$(this).index()] = '<img src="' + $(this).attr('src') + '" alt="' + $(this).attr('alt') + '" style="width:100px; height:60px;" />';
    });
    $('#myDiv').empty();
    for (var j=0; j<myRows; j++) {
        myElements += '<tr>';
        for (var i=0; i<myColumns; i++){
            getRandomImage = Math.floor((Math.random()*randomLength));
            myElements += '<td>' + myImageArray[getRandomImage] + '</td>';
        }
        myElements += '</tr>';
    }
    $('#myDiv').append(myElements).find('img').each(function(){
        $(this).hide();
        $(this).parent('td').click(function(){
            $(this).children('img').toggle();
        });
    });
});