在Jquery中添加唯一的img src函数 [英] adding unique img src function in Jquery

问题描述

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

I am writing a plugin to check the source of all selected img tags and add the src value to an array , now if a src attribute is repeated i.e if two images have the same src than i don't want the src of the 2nd image to be added to the array , I.E. i don't want duplicate src's .

我的Jquery插件中包含以下代码段或确切的功能:

i have the following snippet or rather function in my Jquery plugin :

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

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

the array is declared in the global scope of the plugin :

src_storage = [];

现在不知何故，我进行了多次检查，并且此函数似乎根本没有在数组中添加任何内容.

now somehow , i did multiple checks and this function seems to be adding nothing at all the the array .

当我将上面的功能代码简化为以下内容时:

when i simplify the above function code to the following :

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

所有选定img的src都添加到了数组中，但是这也包含在重复的src中.

all the src's of the selected img's get added to the array , however this gets in the duplicate src's too .

$.inArray函数似乎不像我期望的那样起作用.

the $.inArray function doesn't seem to function the way i expected it to .

我调用函数的方式如下:

The way i call the function is as follows :

$(img).pluginname();  

那我现在该如何微调功能呢?

so how do i go about fine tuning my function now ?

完整的插件源代码在这里，以防您想看看:

The entire plugin source code is here , incase u'd like to have a look :

源代码

谢谢.

Tenali.

推荐答案

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

You could use the .indexOf directly to check if the value exists in an array. Check the return value for -1 if not found. See: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

(您也可以使用jQuery $.inArray做到这一点，只需检查-1)

(You can do that with jQuery $.inArray too, just check for -1)

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

Here is an example of the plugin. Passing the array as a parameter to the plug-in. Check that the array now contains only 3 sources, instead of 4 in the example.

代码段 :

Snippet:

(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转换为snippet.log .请参阅此处: https://meta.stackexchange.com/a/242144/230147 和此处: https://meta.stackexchange.com/a/242144/134069}

_{* Using a script by TJ Crowder for console.log to snippet.log. See here: https://meta.stackexchange.com/a/242144/230147 and here: https://meta.stackexchange.com/a/242144/134069}

这篇关于在Jquery中添加唯一的img src函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！