3

私はこの問題に直面しています..どうすればこの要素タグに画像を入れることができますか?

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

時間を割いて読んで助けようとしてくれた人に感謝します.. もう一度感謝します..

4

2 に答える 2

1

それをするでしょう。

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

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

});

置き換えることができるコードを調べた後、編集します。

document.getElementById('金額')

$("#amount") などで、実際に jQuery で動作します。今はjQueryの利点を利用していないので、プレーンなJavaScriptを書いているだけです...

于 2012-05-23T08:59:29.993 に答える
0

innerhtml プロパティを使用するか、要素を作成して div に追加することで、img タグを追加できます。次に、ロジックに基づいて、画像のタグの src を目的のものに設定できます。

于 2012-05-23T09:02:26.420 に答える