如何查看两个图像源是否相等

How to see if two image sources are equal?

本文关键字:图像 是否 两个 何查看      更新时间:2023-09-26

我正在尝试查看用户单击的两个图像是否相同。我有一些代码可以检索单击的图像的来源:

$('img').click(function() { var path = $(this).attr('src'); });

我只需要一种方法来比较两个来源。我尝试将源存储在数组中,看看它们是否相等,但我无法让它工作:

var bothPaths = [];
$('img').click(function() {
    var path = $(this).attr('src');
    bothPaths.push(path);
}); 
if (bothPaths[0] == bothPaths[1]) {
    alert("they match.");
} else {
    alert("they don't match.");
}

我假设这会比较用户点击的前两个图像源,但我似乎在某处遇到了问题。

您正在检查路径是否匹配...在单击任何内容之前。

相反,请尝试以下操作:

(function() {
    var lastclicked = "";
    $("img").click(function() {
        var path = $(this).attr("src");
        if( lastclicked == path) {
            alert("Match!");
        }
        else {
            if( lastclicked != "") alert("No match...");
        }
        lastclicked = path;
    });
})();

您的 if 语句仅在加载时被解释,请尝试以下操作:

var bothPaths = [];
$('img').click(function() {
    var path = $(this).attr('src');
    bothPaths.push(path);
    compare()
}); 
function compare() {
   if (bothPaths[0] == bothPaths[1]) {
      alert("they match.");
   } else {
       alert("they don't match.");
   }
}

单击图像后,单击处理程序会将内容添加到数组中。 您的比较在附加点击处理程序后立即进行。 换句话说,在任何人有机会点击任何内容之前,您比较数组中的前两个位置。

以下是您应该学习的一些最佳实践代码。 它将帮助您了解页面的生命周期以及jQuery如何最好地与之交互。

$(document).ready(function(){
    var lastClicked = '';
    $(document).on('click', 'img', function(){
        var src = $(this).attr('src');
        if (src == lastClicked) {
            alert('matching');
        } else {
            lastClicked = src;
        }
    });
});