Question

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

我的Jquery插件中有以下片段或更确切的功能：

    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

感谢。

Tenali。

Answer 1

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

（你也可以用jQuery $.inArray来做，只需检查-1）

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

<强> 段：

＆＃13;

(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

＆＃13;

<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" />

＆＃13;

_{*使用TJ Crowder的脚本将 console.log发送到snippet.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。如果数组中的第一个元素与value匹配，则$.inArray()返回0.

参考文献：

$.inArray()。

Answer 3

问题出在您的代码行中：

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

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

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

因为它没有找到-1而且找到任何找到的数组元素的“数组位置”

检查我的测试：

http://jsfiddle.net/6g7m345r/

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

3 个答案: