Question

下面我有一个分配给变量的函数。基本上我让它工作（将属性应用于元素集合）。我的问题是我想要设置属性的元素，以匹配我传递给函数的字符串。

我知道问题在这里：

document.links[i].setAttribute("target", "_blank"); //this is hitting all links in the document.

我只想改变调用中匹配的字符串：

URLChecker.searchURL('smo', 'smodev');

JS：

var URLChecker = (function iffe() {
  var publicAPI = {
        getURL: function() {
            for (var i = 0; i < arguments.length; i++) {
                return {
                    'smo': 'http://url.nyc.com',
                    'smodev': 'http://smodev.rye.foo.com',
                    'url1_sans_3w': 'http://url1.com',
                    'url2': 'http://www.url2.com',
                    'url3': 'http://www2.url3.com'
                }[arguments[i]];
            }
        },
        searchURL: function(url) {
            for (var i = 0, l = document.links.length; i < l; i++) {
                var links = document.links[i];
                if (links.href.indexOf(publicAPI.getURL(url) !== -1)) {
                    document.links[i].setAttribute("target", "_blank");
                }
            }
        }
    };
return publicAPI;
})();

像这样调用函数：

URLChecker.searchURL('smo', 'smodev');

HTML：

<a href="http://url.nyc.com">http://url.nyc.com</a>
<br>
<a href="http://smodev.rye.foo.com">http://smodev.rye.foo.com</a>
<br>
<a href="http://url1.com">http://url1.com</a>
<br>
<a href="http://www.url2.com">http://www.url2.com</a>
<br>
<a href="http://www.url3.com">http://www.url3.com</a>

Answer 1

需要进行一些小的逻辑调整才能做到你想要的。像这样：

var URLChecker = (function iffe() {
  var publicAPI = {
        getURL: function() {
            for (var i = 0; i < arguments.length; i++) {
                return {
                    'smo': 'http://url.nyc.com',
                    'smodev': 'http://smodev.rye.foo.com',
                    'url1_sans_3w': 'http://url1.com',
                    'url2': 'http://www.url2.com',
                    'url3': 'http://www2.url3.com'
                }[arguments[i]];
            }
        },
        searchURL: function() {
            var link, url;
            for(var i = 0, len = arguments.length; i < len; i++) {
                url = this.getURL(arguments[i]);
                for (var j = 0, jlen = document.links.length; j < jlen; j++) {
                    link = document.links[j];
                    if (link.href.indexOf(url) !== -1) {
                        link.setAttribute("target", "_blank");
                    }
                }
            }
        }
    };
return publicAPI;
})();

URLChecker.searchURL('smo', 'smodev');

关于你如何检查网址只有一些问题，你需要遍历网址和参数。

indexOf也存在一个问题，即括号在错误的位置结束。

JS小提琴：https://jsfiddle.net/dkksgcc7/

Answer 2

您的代码中存在一个问题：

if (links.href.indexOf(publicAPI.getURL(url) !== -1)) {

您没有正确平衡括号。将其更改为：

if (links.href.indexOf(publicAPI.getURL(url)) !== -1) {

有一个不同的问题，你还没有问过，但可能会在以后咬你。

看起来你尝试从getUrl返回一个网址数组，但实际上你只返回一个字符串：第一个匹配的结果。如果你真的希望它返回一个数组，试试这个：

getURL: function() {
    var result = [];
    for (var i = 0; i < arguments.length; i++) {
        result.push({
            'smo': 'http://url.nyc.com',
            'smodev': 'http://smodev.rye.foo.com',
            'url1_sans_3w': 'http://url1.com',
            'url2': 'http://www.url2.com',
            'url3': 'http://www2.url3.com'
        }[arguments[i]]);
    }
    return result;
},

但是，如果您这样做，则必须在下方修改您的链接过滤器以匹配。它可能看起来像这样：

if (links.href.indexOf(publicAPI.getURL(url)[0]) !== -1) {

如果不是这种情况，并且您只是希望能够将一个网址列表传递给getURL，并让它尝试匹配其中一个网址，那么此处不需要进行任何更改。

Answer 3

错误的事情，但他们很容易修复。首先，URLChecker.searchURL接受一个参数，然后您将其传递给两个参数。更改您的功能以使用for(var k in arguments) { ... }并检查publicAPI.getURL(arguments[k])，以便您可以检查所有网址。其次，当您检查links.href时，它会将其标准化。这意味着您认为自己正在检查＆＃34; http://url.nyc.com＆＃34;针对＆＃34; http://url.nyc.com＆＃34;的数组项目，但实际上（至少在Chrome中）它会将您的href更改为＆＃34; http://url.nyc.com/＆＃34; （注意添加的斜线）。检查links.getAttribute('href')将解决此问题。最后，你的逻辑似乎没有了。您正在检查links.href.indexOf，但links.href不是一个数组，您应该只需要if (links.getAttribute('href') === publicAPI.getURL(arguments[k]))。最终结果将是：

＆＃13;

var URLChecker = (function iffe() {
  var publicAPI = {
    getURL: function() {
      for (var i = 0; i < arguments.length; i++) {
        return {
          'smo': 'http://url.nyc.com',
          'smodev': 'http://smodev.rye.foo.com',
          'url1_sans_3w': 'http://url1.com',
          'url2': 'http://www.url2.com',
          'url3': 'http://www2.url3.com'
        }[arguments[i]];
      }
    },
    searchURL: function() {
      for(var k in arguments) {
        for (var i = 0, l = document.links.length; i < l; i++) {
          var links = document.links[i];
          if (links.getAttribute('href') === publicAPI.getURL(arguments[k])) {
            document.links[i].setAttribute("target", "_blank");
          }
        }
      }
    }
  };
  return publicAPI;
})();
URLChecker.searchURL('smo', 'smodev');

＆＃13;

a[target]:after {
  content: '\2197';
}

＆＃13;

<a href="http://url.nyc.com">http://url.nyc.com</a>
<br>
<a href="http://smodev.rye.foo.com">http://smodev.rye.foo.com</a>
<br>
<a href="http://url1.com">http://url1.com</a>
<br>
<a href="http://www.url2.com">http://www.url2.com</a>
<br>
<a href="http://www.url3.com">http://www.url3.com</a>

＆＃13;

Answer 4

我会尝试一种与您的publicAPI对象不同的小方法，如下所示：

var publicAPI = {
    getURL: function(url) {
          var targetUrls = {
                'smo': 'http://url.nyc.com',
                'smodev': 'http://smodev.rye.foo.com',
                'url1_sans_3w': 'http://url1.com',
                'url2': 'http://www.url2.com',
                'url3': 'http://www2.url3.com'
            };

         return targetUrls[url] ? targetUrls[url] : false;
    },

    searchURL: function() {
        var urls = arguments;

        for (var i = 0, l = document.links.length; i < l; i++) {
            var links = document.links[i];

            for (var j=0; j < urls.length; j++) {
                if (links.href.indexOf(publicAPI.getURL(urls[j])) !== -1) {
                    links.setAttribute("target", "_blank");
                }
            }

        }
    }
};

读起来有点清楚，因为你是一个接一个地显式传递getURL函数所需的参数，而不是让它处理来自另一个函数的所有参数。

试着看看它是否有效。

在javaScript中使用for循环时，如何为特定元素设置属性？

4 个答案: