Question

我正面临这个问题。我可以知道，我怎么能将图像放入这个元素标签，

<div id="item1"></div>

下面这段代码的目的是当用户点击“+”时会出现图像。当用户点击“播放”按钮时，出现的图像应该如上所述放入标签中。

不幸的是，我无法将刚刚出现的图像放入标签中。

我知道有硬编码方法，但很抱歉，我不是在寻找这种方法..

    <!DOCTYPE html>
    <html>
<head>
    <script src="code.jquery.com/jquery-1.7.2.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>   

    <style>
      .myClass {
            width: 40px; height: 40px; float:left;
           padding: 1px; margin:3px; position:absolute; 
            left:50px; top:60px; background:blue; color:white;
        }
    </style>       

</head>
<body bgcolor="green";>
    <div id="item1" class="myClass">F1</div>
    <div id="item2" class="myClass">F2</div>
    <div id="item3" class="myClass">F3</div>

    <script>
        var predator;

        var Predatorlist = [];            

        function addvalue()
        {
            Predatorlist.push(uniqueid)
            alert(Predatorlist);
        }

        function removevalue()
        {
            Predatorlist.pop(uniqueid)
            alert(x.innerHTML=Predatorlist);
        }

        //************** End of Array *********************** 
        function Add() {
            var id = Math.floor(Math.random()*101+1);
            x = Math.random() * 550;
            y = Math.random() * 250;
            if (document.getElementById('amount').value < 50){
                document.getElementById('amount').value++;
                svg = document.getElementById("main");

                var id = 'predator';
                uniqueid =  "frog" + document.getElementById('amount').value;

                //namespaces for SVG
                svgNS="http://www.w3.org/2000/svg";
                xlinkNS="http://www.w3.org/1999/xlink";

                // create a image element
               image = document.createElementNS(svgNS, 'image');

                // set id and other attributes
                image.setAttributeNS(null, "id", uniqueid);
                image.setAttributeNS(xlinkNS, "href","jef-frog.gif");
                image.setAttributeNS(null, "x", x);
                image.setAttributeNS(null, "y", y);
                image.setAttributeNS(null, "width", "50");
                image.setAttributeNS(null, "height", "50");

                // append to svg
                svg.appendChild(image);
            } else {
                alert("we got 50");
            }
        }

       function Remove() {
            if(document.getElementById('amount').value > 0)
            {         
                document.getElementById('amount').value--;
                svg = document.getElementById("main");
                svg.removeChild(svg.lastChild);
            }
        }

        function numinput(e){
            // get the input value if enter
            key=e.keyCode || e.which;
            if (key==13){
                total = document.getElementById("amount").value;
                dummy = total;

                // clear svg with image to avoid clearing the canvas
                svg = document.getElementById("main");
                element = svg.getElementsByTagName("image");
                while(element.length>0){
                    element = svg.getElementsByTagName("image");
                    element[0].parentNode.removeChild(element[0]);
                }

                // use the input to create the number of frog.
                while (dummy>0)
                {
                    Add();
                    dummy--;
                }
                document.getElementById("amount").value = total;
            }
        }     

        function randomRange(min,max) {
            return Math.random() * (max-min) + min;
        }

        /* Generate some random starting position */
        var startItem1X = randomRange(50,100);
        var startItem1Y = randomRange(50,100);
        var startItem2X = randomRange(50,100);
        var startItem2Y = randomRange(50,100);
        var startItem3X = randomRange(50,100);
        var startItem3Y = randomRange(50,100);
        var startmyClassX = randomRange(50,100);
        var startmyClassY = randomRange(50,100);

        var item1 = $("#item1"),cycle1;
        var item2 = $("#item2"),cycle1;
        var item3 = $("#item3"),cycle1;

        function runItem1() {                               
            /* Set a the starting position to be random by editing the css */
            $("#item1").css("left", startItem1X+"px");
            $("#item1").css("top", startItem1Y+"px");

          /* Cycle1 and Cycle2 variables allow infinite loop */ 
            (cycle1 = function() {
             var m = randomRange(50,100);
             var n = randomRange(75,150);
             item1.appendChild(image)
             item1.animate({left:'+='+n},2000);
             item1.animate({left:'+='+m, top:'+='+m}, 2000)
             item1.animate({left:'-='+m, top:'+='+m}, 2000)
             item1.animate({left:'-='+n},2000);
             item1.animate({top:'-='+n},2000,cycle1)

             })();
        }

        function runItem2() {
            $("#item2").css("left", startItem2X+"px");
            $("#item2").css("top", startItem2Y+"px");

            (cycle2 = function() {
             var m = randomRange(50,100);
             var n = randomRange(75,150);
             item2.animate({top:'+='+m, left:'+='+n},2000);
             item2.animate({left:'-='+n},2000);
             item2.animate({left:'+='+n, top:'-='+n},2000);
             item2.animate({left:'-='+n},2000)
             item2.animate({top:'+='+m},2000,cycle2)              
             })();
        }
        runItem1();
        runItem2();
    </script>

    <SVG xmlns="http://www.w3.org/2000/svg"

        xmlns:xlink="http://www.w3.org/1999/xlink" id="main" style="border:inset 1px #000000;width:600;height:300"><param name='wmode' value='transparent'/></SVG>

    <img src="jef-frog.gif" alt="frogsonice.com" width="100" height="100"/><BR/>

    <INPUT type="button" value="+" onClick="Add(); addvalue();"> 
    <INPUT type="text" id="amount" value=0  maxlength="3" size="1"  onkeypress="numinput(evt)">
    <INPUT type="button" value="-" onClick="Remove(); removevalue();">        
    <INPUT type="button" value="Play" onClick="runItem1(); runItem2();">  

</body>
    </html>

非常感谢那里的人，花时间阅读并试图帮助..再次感谢..

Answer 1

会这样做。

$('#your-play-button').click(function(e) {

  $('#item1').html('<img src="mygif.gif" />');

});

在查看您可以替换的代码后进行编辑：

的document.getElementById（ '量'）

by $（“＃amount”）等，并且真正使用jQuery。因为现在你没有使用jQuery的优势，但你只是在写简单的javascript ...

Answer 2

你可以使用innerhtml属性添加img标签，或者创建元素并将其附加到div。然后根据您的逻辑，您可以将图像的标签src设置为所需的值。

如何将图像放入<div id =“item1”> </div>？

2 个答案: