0 
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <title>Javascript Create Div Element Dynamically</title>

        <style type="text/css">
            .ex
            {
                width:200px;
                position: relative;
                background-color :#CCC;
                height:150px;
                padding:10px;
                margin:5px;
                left-margin:0px;
                float :left;
            }
            #newdiv
            {
                width:800px;
                height:800px;
                border:1px solid #000;      
            }
            .myimage
            {
                height: 80;
                width: 80;
                top:100;
                margin:5px;
            }
            .border
            {
                border:1px solid #000;  
            }

        </style>
        <script>

            cc = 1;
            function changeimage()
            {
                if (cc == 0)
                {
                    cc = 1;
                    $('.myimage').attr('src', 'images/plus.png');
                }
                else if (cc == 1)
                {
                    cc = 2;
                    $('.myimage').attr('src', 'images/plus2.png');
                }
                else if (cc == 2)
                {
                    cc = 3;
                    $('.myimage').attr('src', 'images/plus2.png');
                }
                else
                {
                    cc = 0;
                    $('.myimage').attr('src', 'images/plus2.png');
                }
            }
        </script>
        <script type="text/javascript" language="javascript">
            var i = 0;
            function createDiv()
            {

                if (i < 6) {
                    var divTag = document.createElement("div");

                    divTag.id = "div1";

                    divTag.setAttribute("align", "left");

                    divTag.style.margin = "0px auto";

                    divTag.className = "ex";

                    divTag.innerHTML = "<img class='myimage' onclick='changeimage()' border='0' src='images/white_contact.png' width='100' height='180' />";

                    document.getElementById("newdiv").appendChild(divTag)

                }

                i++;
                $(".ex").draggable({containment: 'parent', cursor: 'pointer', opacity: 0.6});
                $(".ex").droppable({hoverClass: 'border'});

            }

        </script>
    </head>
    <body>

        <p align="left">
            <b>Click this button to create div element dynamically:</b>
            <input id="btn1" type="button" value="create div" onClick="createDiv();" />

        <div id = "newdiv">

        </div>
    </p>

</body>
</html>

添加 6 个 DIV 后，单击一个 DIV，所有图像都会更改，现在我想单独更改每个 div 的图像，我的时间不多了。谁能告诉我哪一部分出了问题，让我解决一下，谢谢

4

1 回答 1

0

您需要修改代码，以便只有单击的 img 元素会更改其源图像，而不是“myimage”类中的所有 img 元素。我建议将 img 元素作为参数传递给 changeimage：

divTag.innerHTML = "<img class='myimage' onclick='changeimage(this)' border='0' src='images/white_contact.png' width='100' height='180' />";

这样您就可以只选择单击的图像：

function changeimage(image)
{
if (cc==0) 
  {
  cc=1;
  $(image).attr('src', 'images/plus.png');
  }
// etc

确保您的点击计数是在每个 img 的基础上完成的，而不是在全局范围内完成，需要做更多的工作。做到这一点的一种方法是将计数放在 img 元素本身上，例如，image.cc而不是仅仅cc在内部changeimage（尽管您需要注意image.cc未定义的情况）。

于 2013-05-27T14:44:43.343 回答