Question

我是javascript的新手，我正在创建一个用户通过点击重新排列图片表的游戏。

用户点击表格中的一个图像，然后点击表格中的另一个图像，他们应该交换位置。我必须使用javascript，所以我创建了一个3x4表，并填充了12个图像。目前只有两种不同类型的图像，但我计划在完成交换功能后添加更多图像。

我为表格中的所有图片添加了一个事件监听器，但是我无法显示警报并向我提供图片的ID。此外，单击后，我无法让图像交换位置。

这是我到目前为止所做的代码：

<head>
   <link rel="stylesheet" href="hw3CSS.css" type="text/css"/>
   <title>Picture Scramble Game</title>
</head>

<script>

   function addEventListeners()
   {
      var images = document.getElementsByClassName("element");
      for(var i = 0; i < images.length; i++)
      {
         images[i].addEventListener("click", function (event) {
            images[i].addEventListener('mousedown', tagClick, false);
            alert('The id of the element you clicked: ' + this.id);
         };
      }
   }

   function swapImages("image1", "image2")
   {
      document.getElementsById("image1").src="image2";
      document.getElementsById("image2").src="image1";
   }

</script>

<body>

   <script type="text/javascript">
      addEventListeners();
   </script>

   <div id="table">
      <table>
         <tr>
            <td>
               <img class="element" id="image1" src="mario.png" />
            </td>
            <td>
               <img class="element" id="image2" src="mario.png" />
            </td>
            <td>
               <img class="element" id="image3" src="mario.png" />
            </td>
         </tr>
         <tr>
            <td>
               <img class="element" id="image4" src="mario.png" />
            </td>
            <td>
               <img class="element" id="image5" src="mario.png" />
            </td>
            <td>
               <img class="element" id="image6" src="mario.png" />
            </td>
         </tr>
         <tr>
            <td>
               <img class="element" id="image7" src="luigi.png" />
            </td>
            <td>
               <img class="element" id="image8" src="luigi.png" />
            </td>
            <td>
               <img class="element" id="image9" src="luigi.png" />
            </td>
         </tr>
         <tr>
            <td>
               <img class="element" id="image10" src="luigi.png" />
            </td>
            <td>
               <img class="element" id="image11" src="luigi.png" />
            </td>
            <td>
               <img class="element" id="image12" src="luigi.png" />
            </td>
         </tr>
      </table>
   </div>

</body>

我怎样才能至少让我的警报出现，告诉我图像被点击了，以及更换图像的更好方法是什么？

Answer 1

首先，您需要将addEventListeners()的调用设置为正文卸载事件：

 <body onload="addEventListeners();">;

此外，您的JavaScript似乎完全错误。尝试这样的事情：

var rememberedElement = null;

function swapImages(image1, image2){
    var tmpSrc = image1.getAttribute('src');

    image1.setAttribute('src', image2.getAttribute('src'));
    image2.setAttribute('src', tmpSrc);

    rememberedElement = null;
 }

 function addEventListeners(){
     var images = document.getElementsByClassName("element");
     for (var i = 0; i < images.length; i++){
     var image = images[i];
     image.addEventListener('click',function(event){
         if (rememberedElement === null){
            rememberedElement = event.target;
         }
         else {
            swapImages(rememberedElement, event.target);
         }
     },false); 
   } //for i
 }

这是未经测试的，可能包含一些错误。它应该给你一些你可以做的事情。

Answer 2

我认为最好在dom级别交换图像，而不是仅仅交换网址。这也可以让您交换所有图像属性和特性（包括alt和title）。

function addEventListeners() {
    var images = document.getElementsByClassName("element");
    var selectedImage = null;
    for(var i = 0; i < images.length; i++) {
        images[i].addEventListener("click", function() {
            if(selectedImage == null) {
                selectedImage = this;
            } else {
                // Getting tds containing images
                var selectedParent = selectedImage.parentNode;
                var thisParent = this.parentNode;

                // Detaching images from DOM
                // (it's optional because appendChild implicitly does it)
                //selectedParent.removeChild(selectedImage);
                //thisParent.removeChild(this);

                // Adding images to DOM
                selectedParent.appendChild(this);
                thisParent.appendChild(selectedImage);

                selectedImage = null;
            }
        });
    }
}

如何使用javascript交换表格中的图像位置？

2 个答案: