Question

我想根据行的列中的flag变量的条件添加图像。我无法使用innerHtml或如果我也使用图像对象，它无法正常工作。行是动态创建的，所以我很困惑如何解决它，当flag为true时，它们将显示图像，否则图像将不会显示。

Answer 1

您最好导入jQuery以修复任何跨浏览器兼容性问题，然后如果您的id为“myDiv”的div，则只需在html文档中的结束正文标记之前添加以下内容。

<script>
  $('#myDiv').append('<img src="/path/myImage.png" />'); 
</script>

但理想情况下，您最终应将JavaScript代码保存在单独的.js文件中。

Answer 2

只需将您的图片（可能是标记）保存在静态的位置

<IMG src="youImagePath" style="display:none;" id="myId"/>

然后在Javascript中，您可以将此图像显示为

 if(flag){
    document.getElementById('myId').style.display="block";
}

如果您有一些复杂的要求，那么@Christopher Tokar解决方案会更好。

由于

Answer 3

我更喜欢使用jQuery，这可以让你更快地做很多事情。

这是一个example，它会让你了解它的工作原理。你可以自己添加标志..

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

如何在javascript中动态添加图像

3 个答案: