Question

我有一张4张图片的表格，点击后会有所变化。我想知道如何检查是否/当表中的所有图像都是相同的图像源。我试图找出一种检查表中所有图像源的方法。任何建议表示赞赏！

HTML：

<table>
    <tr>
        <td>
            <img id="pos1" src="slicedImg_01.gif" onclick="change(1)" />
            <img id="pos2" src="slicedImg_02.gif" onclick="change(2)" />
        </td>
    <tr>
        <td>
            <img id="pos3" src="slicedImg_03.gif" onclick="change(3)" />
            <img id="pos4" src="slicedImg_04.gif" onclick="change(4)" />
        </td>   
    </tr>       
    </tr>
</table>

JS：

var v = document.getElementById("pos" + clicked_img).src = "slicedImg_0" + rNum + ".gif";



        //var elems = document.getElementsByName.images("f")[0].src;
        //alert(elems);

        if (document.getElementById("pos1").src ==  v){
            if (document.getElementById("pos2").src == v){
                if (document.getElementById("pos3").src == v)

请不要介意我在页面上尝试尝试错误。

Answer 1

尝试在有意义的地方运行它，如果您要检查的匹配src是静态的，则可以删除src参数。

function checkSameSrc(src){

    return document.querySelector('src=[" + src + "]').length === 4;

}

Answer 2

如果允许使用jQuery，请以快速Fiddle为例：

var image_array = $("img").map(function () {
  return $(this).attr("src");
});
images = $.unique(image_array);
alert(images.length);

如果images.length为1，则只有1个唯一的图像源。当您将小提琴中的一个图像源更改为其他图像之一并再次运行小提琴时，警报将为您提供3而不是4等。使用image_array - 函数创建map()，将每个图像的src推入数组。 unique() - 函数从该数组中删除所有双重条目。

参考文献：http://api.jquery.com/jquery.unique/，http://api.jquery.com/jquery.map/

与纯Javascript相同：

 var elements = document.getElementsByTagName('img');
 var imageArray = new Array();
 for (var i=0; i<elements.length; i++) {
    imageArray[i] = new Image();
    imageArray[i] = elements[i].src;
 }
 function getUnique(element)
 {
  return element.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[]);
 }
 alert(getUnique(imageArray).length);

摆弄两个版本和一个双重图像：Fiddle

getUnique（）中使用的漂亮单行的参考：Remove Duplicates from JavaScript Array，请参阅Christian Landgren的回答。

检查多个图像源 - Javascript

2 个答案: