在 Jquery 中添加唯一的 img src 函数

Question

我正在编写一个插件来检查所有选定的 img 标签的来源并将 src 值添加到数组中，现在如果重复 src 属性，即如果两个图像具有相同的 src，而不是我不想要的 src要添加到数组中的第二张图像，即我不想要重复的 src 的。

我的 Jquery 插件中有以下 sn-p 或更确切的功能：

    function get_prop(current){
        var temp = current.attr('src');
        if ($.inArray(temp , src_storage)) {
            console.log('already in array');    
        }else{
            src_storage.push(temp);             
        }
    }

数组在插件的全局范围内声明：

src_storage = [];

现在不知何故，我做了多次检查，这个函数似乎没有添加任何数组。

当我将上面的功能代码简化为以下：

    function get_prop(current){
        var temp = current.attr('src');
        src_storage.push(temp);
    }

所选 img 的所有 src 都被添加到数组中，但是这也会出现在重复的 src 中。

$.inArray 函数似乎没有按我预期的方式运行。

我调用函数的方式如下：

$(img).pluginname();  

那么我现在该如何微调我的功能呢？

完整的插件源代码在这里，如果你想看看：

Source code

谢谢。

特纳利。

Answer 1

您可以直接使用.indexOf 来检查该值是否存在于数组中。如果未找到，请检查 -1 的返回值。见：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

（你也可以用 jQuery $.inArray 做到这一点，只需检查 -1）

这是插件的一个例子。将数组作为参数传递给插件。检查数组现在是否只包含 3 个源，而不是示例中的 4 个。

片段：

(function ($) {
    $.fn.extend({                               // defining the plugin
        saveSource: function (arr) {            // the plugin func with argument
            return this.each(function () {      // return all objects for chaining
                var src = this.src;             // get the src attribute of the image
                if (arr.indexOf(src) === -1) {  // check if it exists in given array
                    arr.push(src);              // add it to the end if not exists
                }
            }); 
         } 
    }); 
})(jQuery);

var srcList = [];              // declare the array
$("img").saveSource(srcList);  // call the plugin on all images with the array argument
snippet.log(srcList);          // check the array contents

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<img src="http://placehold.it/32x32" />
<img src="http://placehold.it/32x32" />
<img src="http://placehold.it/31x31" />
<img src="http://placehold.it/33x33" />

_{* 使用 TJ Crowder 编写的脚本将 console.log 转换为 sn-p.log。见这里：https://meta.stackexchange.com/a/242144/230147 和这里：https://meta.stackexchange.com/a/242144/134069}

Answer 2

你遇到的问题是这一行：

if ($.inArray(temp , src_storage))

因为$.inArray 模拟本机Array.prototype.indexOf()，所以如果找到则评估返回元素的索引，否则返回-1。 -1 仍然是一个真值；所以改为：

if ($.inArray(temp , src_storage) === -1)

顺便说一句，当 JavaScript 方法不起作用时，通常最好查看文档，在这种情况下，文档清楚地解释了发生的情况：

$.inArray() 方法类似于 JavaScript 的原生 .indexOf() 方法，因为它在找不到匹配项时返回 -1。如果数组中的第一个元素匹配值，$.inArray() 返回 0。

参考资料：

• $.inArray()。

Answer 3

问题在于你的代码行：

if ($.inArray(temp , src_storage) ) {

你应该像下面这样检查它：

if ($.inArray(temp , src_storage) != -1 ) {

因为它返回 -1 表示未找到，而“数组位置”表示任何找到的数组元素

检查我的测试：

http://jsfiddle.net/6g7m345r/