Question

您好我正在尝试使用JQuery函数调用数组中的图像。

我添加了一个标记来识别id为Predator的每个div。我正在打电话给他们，并在＆＃34; Play＆＃34;按钮是单击。

不幸的是它。任何人都可以帮助发现错误吗？

<HTML>
    <HEAD>  
        <script src="code.jquery.com/jquery-1.7.2.js"></script>
        <SCRIPT language="javascript">

           //************** Array ***********************

            var Predatorlist = [];
            //uniqueid = "anchovies" + document.getElementById('amount').value;

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

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

          //************** Array *********************** 

            var div = $("div");

            function runIt() {
                div.show("slow");
                div.animate({left:'+=200'},2000);
                div.slideToggle(1000);
                div.slideToggle("fast");
                div.animate({left:'-=200'},1500);
                div.hide("slow");
                div.show(1200);
                div.slideUp("normal", runIt);
            }

            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");

                    // construct uniqueid for the images
                    uniqueid = "<div id='Predator'>" + "frog" + document.getElementById('amount').value + "</div>";

                    //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 numeralsOnly(evt) {
             evt = (evt) ? evt : event;
             var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : 
             ((evt.which) ? evt.which : 0));
             if (charCode > 31 && (charCode < 48 || charCode > 57)) {
             return false;
             }
             return true;
             }
             */
            </SCRIPT>
    </HEAD>
    <BODY>
        <div>
            <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>
        </div>
        <H2>TESTING</H2>
        PREY<BR/>
        <img src="jef-frog.gif" alt="frogsonice.com" width="100" height="100"/><BR/>

        <INPUT type="button" value="+" onClick="Add(); addvalue();"> 


            <!-- disabled the textfield -->
            <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="runIt();">
    </BODY>
</HTML>

Answer 1

你提到“每个div都有ID Predator”。根据定义，ID捕食者只能有一个元素。你应该考虑使用类。

使用该类选择所有元素的最简单方法是使用JQuery并简单地使用下面的代码段。从那里你可以使用“捕食者”类对元素进行操作。

$('.Predator')

Jquery使用DIV标记从数组中移动项目

1 个答案: