Question

我有一张有四个瓷砖的桌子，这个房子是第一个，第二个，第三个和第四个。我有一组带有类.thumbnail的图像，我想要的是点击缩略图并将图像放在第一个图块中，然后点击另一个缩略图并让它进入第二个图块等等。我＆＃39 ; ll担心以后调整大小。此外，在此代码中，我将相同的jpg（amb.jpg）放在任何图块中，无论为了简单而点击了什么缩略图。以下代码几乎可以正常工作，除非我点击一个缩略图，amb.jpg一次放在所有4个瓷砖中，而不是我用咔嗒声后面的.css代码指定的那个。我想要的是它被放置在第一个瓷砖中，然后当我再次点击缩略图时，将amb.jpg放在第二个瓷砖中等等。这就是为什么我写的相同代码4次。我哪里错了？感谢。

   <script>
   $('.thumbnail').live ("click", function()   {


       $("#firsttile").css('background-image', 'url(amb.jpg)');
       return false;
     });
     $('.thumbnail').live ("click", function()   {


       $("#secondtile").css('background-image', 'url(amb.jpg)');
       return false;
     });

       $('.thumbnail').live ("click", function()   {


       $("#thirdtile").css('background-image', 'url(amb.jpg)');
       return false;
     }); 

       $('.thumbnail').live ("click", function()   {


       $("#fourthtile").css('background-image', 'url(amb.jpg)');
       return false;
     });             

   </script>

Answer 1

使用计数器跟踪您要更新的图块。

var tiles = [ "#firsttile", "#secondtile", "#thirdtile", "#fourthtile" ];
var curTile = 0;

$(document).on("click", ".thumbnail a", function (e) {
    e.preventDefault();
    if (curTile < tiles.length) {
        $(tiles[curTile]).css('background-image', 'url(' +
        $(this).attr('href') + ')');
    }
    curTile++;
    return false;
});

FIDDLE

Answer 2

将图像添加到所有图像的原因是因为即使使用选择器.thumbnail也附加了单击。所有这些都有它，所以当你点击时，所有的事件都会激发。在委托函数中，只需将事件添加为参数...然后将css添加到单击的实际html元素中。在您的情况下，在我的示例代码中将“on”更改回“live”。我知道你提出的代码也可能只是一个示例，但是你也应该将它放在一个文档就绪块中，因为在调用这个JS时，html可能无法呈现并准备好附加事件。

$('.thumbnail').on("click", function(event)   {
   event.preventDefault();
   $(event.currentTarget).css('background-image', 'url(amb.jpg)');
   return false;
});

.click功能无法按计划进行多次调用

2 个答案: