Question

我正在开发一款记忆匹配游戏。我有一些代码可以检查用户点击的两个图像是否具有相同的源，如果它们具有相同的源，则会删除图像。

(function compareClicked() {
    var lastclicked = "";
    $("img").click(function() {
        var path = $(this).attr("src");
        if( lastclicked == path) {
            $('img').hide(1000, function () {
            $(this).remove();
             });
        }
        else {
            if( lastclicked != "") alert("Not a match");
        }
        lastclicked = path;
    });
})();

但是，正如您所看到的，当它们具有相同的源时，它会删除页面上的所有图像 - 即使用户没有单击它们。如何更改它以便仅删除用户单击的两个图像？

Answer 1

var lastclicked = "";
$("img").click(function() {
    var path = $(this).attr("src"); // or this.src
    if (lastclicked == path) {
        $(this).hide(1000, function() {
            // remove image with same src as lastClicked
            $('img[src="' + lastclicked + '"]').remove();
        });
    } else {
        if (lastclicked != "") alert("Not a match");
    }
    lastclicked = path;
});

<强> DEMO

Answer 2

如果你有多次（超过两次）相同的Src，我真的建议你tag你点击的图像知道应该隐藏哪一个。如上所述，您可以使用attr或特殊class来实现此目的。

Answer 3

像

这样的东西

var lastEl = null;

$(document).ready(function(){

$('img').each(function(index){
  $(this).attr('id','img-' + index);
});    

$('img').click(function(){
  if( lastEl ) {
    if( ($(this).attr('src') == lastEl.attr('src')) && ($(this).attr('id') != lastEl.attr('id')) ) {
      $(this).remove();
      lastEl.remove();
    }
    lastEl = null;
  } else {
    lastEl = $(this);
  }
});

});

没有测试过，但它必须非常接近

编辑：根据下面的对话更新了代码。 JS在这里摆弄http://jsfiddle.net/joevallender/pc3Qa/3/

再次编辑：JS小提琴链接现在应该是正确的

删除用户点击的图像

3 个答案: