在 Javascript 中比较 2 图像的来源答案

【问题标题】：Comparing 2 Image's sources in Javascript在 Javascript 中比较 2 图像的来源
【发布时间】：2015-10-28 15:19:47
【问题描述】：

我正在尝试比较 2 张图片，看看它们是否相同。我已经对此进行了相当多的研究，但无法得出有效的结论。这是我现在拥有的示例：

var image1 = document.getElementById('imgId1');
var image2 = document.getElementById('imgId2');
if(image1.src.match(image2.src)) {   <---This seems to only work w/ a string

  //do whatever here
}

我还尝试了其他方法，例如：

if(image2.src.indexOf(image1.src)!= -1)
{
    //do whatever here
}

和

if(image2.src == image1.src)
{

}

和

if(image2.src === image1.src)
{

}

我尝试过使用单引号、双引号、无引号。我之前没有上过 Javascript 课程，所以这种比较对我来说是新的。任何帮助都会很棒，谢谢。

完整代码--

<script language="javascript">

function changeImage1() {

    var num = Math.floor((Math.random() * 48) + 1);
    var n = num.toString();
    var numImg = n.concat(".jpeg");
    var string = "/blah/blah/"
    var final = string.concat(numImg);
    var image = document.getElementById('imgClickAndChange1');
    var image2 = document.getElementById('imgClickAndChange2');
    if(image.src.match("blah.jpg")) {
        var num2 = Math.floor((Math.random() * 48) + 1);
        var n2 = num2.toString();
        var numImg2 = n2.concat(".jpeg");
        var final2 = string.concat(numImg2);
        image2.src = final2;
        image.src = final;
        if(image2.src == image.src){
            num2 = Math.floor((Math.random() * 48) + 1);
            n2 = num2.toString();
            numImg2 = n2.concat(".jpeg");
            final2 = string.concat(numImg2);
            image2.src = final2;
        }
    } else {
        image.src = final;
        if(image.src == image2.src){
            num = Math.floor((Math.random() * 48) + 1);
            n = num.toString();
            numImg = n.concat(".jpeg");
            final = string.concat(numImg);
            image.src = final;
        }

    }
}

我意识到，在第二个兰特之后，图像仍然存在相同的可能性。 -- 脚本仍然会在第 1 遍中放置相同的图像

【问题讨论】：

如果它们不匹配使用==，那么它们就是不匹配。您是否将.src 的两个值都记录到控制台以查看它们实际上是什么？ HTML 中的源代码以什么开头？
您尝试的任何尝试有问题吗？不太清楚你的问题是什么。 === 是测试原始值是否相等的方法。如果您对 JavaScript 不是很熟悉，为什么不阅读教程呢？ eloquentjavascript.net “我尝试过使用单引号、双引号，没有引号。” 引号表示 解析器 的字符串文字。它们不是价值的一部分，因此与您使用哪一个无关。
@squint @FelixKling --- 这样做的目的是确保不会同时弹出 2 个相同的图像。如果它们相同，则将更改为不同的图像。我知道它不起作用，因为仍然会弹出 2 张图像并且相同。 HTML 中的源代码如下所示：<img alt="" src="blah.jpg" style="height: 276px; width: 200px" id="imgClickAndChange1" onclick="changeImage2()" />
@squint 真的没有其他方式来描述它。 ——检查新信息。单击一个图像时，将更改另一个图像。如果被更改的新图像与其他图像相同，它将为 src 提供一个新图像。
当您使用onclick="changeImage(this)" 时，您的函数会如下所示：function changeImage(image){ if(image.id == imgClickAndChange1){ //do smething } else{ //do something} } 从那里您可以引用图像源吗？喜欢image.src = var;？

标签： javascript comparison-operators

【解决方案1】：

双等号“==”应该没问题。当它看不到发生了什么时尝试输出值。

if(image2.src == image1.src)
{

}
else
{
    console.log([image2.src, image1.src]);
    alert("They did not match because 1 is " + image1.src + " and 2 is " + image2.src);
}

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
@LawrenceAiello 当然可以。它告诉了他比较字符串的正确方法，这正是他想要的。剩下的只是当您的代码没有显示您的预期时知道如何调试的额外好处。