Question

我正在尝试编写一个JS函数，该函数将遍历HTML文档中的元素，并对具有特定属性值（特定URL为@href的元素）执行功能。但是，我在将正确的元素传递给函数时遇到了麻烦。

这是一个典型的HTML元素：

<a id="xyz" n="1" href="www.example.com">text</a>

文档包含许多此类内容。每个@id对其<a>元素都是唯一的。涉及多个@href URL。这些不一定与@n属性值相对应。所以看起来像这样：

<html>
<head>
<title>MyDocument</title>
</head>
<body>
<a id="abc" n="1" href="www.example.com" onclick="myFunction(this.id)">text</a>
<a id="def" n="2" href="www.anotherexample.com" onclick="myFunction(this.id)">text</a>
<a id="xyz" n="1" href="www.example.com" onclick="myFunction(this.id)">text</a>
<a id="ghi" n="1" href="www.anotherexample.com" onclick="myFunction(this.id)">text</a>
</body>
</html>

我只对具有@n属性的用户感兴趣。

这是我的JS函数。这意味着将文档中具有相同@href URL的所有元素传递到myOtherFunction。

function myFunction(id){
var el = document.getElementById(id);
var url= el.attributes[2].value;
var els = document.querySelectorAll("a[n]");
var i;
for (i = 0; i < els.length; i++) {
    if(els[i].attributes[2].value = url) {
        myOtherFunction(els[i].id);
    }
}
}

但是，即使它没有来自<a>的{{1}}值，它也只会传递文档中的第一个@href元素。

因此，假设单击了el元素<a>“ def”。

预期结果 @id元素<a>“ def”和@id“ ghi”被传递给@id。

当前结果 myOtherFunction元素<a>“ abc”被传递给“ myOtherFunction”。

在@id的调用中，i变量可能不保留其来自“ if”条件的值。我将如何做呢？

或者我在尝试做的事情上完全走错了路？

Answer 1

<html>

<head>
    <title>a</title>
</head>

<body>
    
    <a id="xyz" n="1" href="www.example.com">text</a>

    <script>

        function myFunction(id) {
            var el = document.getElementById(id);
            //var url = el.attributes[2].value;
            var url = el.getAttribute('href')
            debugger
            var els = document.querySelectorAll("a[n]");
            var i;
            for (i = 0; i < els.length; i++) {
                if (els[i].getAttribute('href') == url) {
                    //myOtherFunction(els[i].id);
                }
            }
        }

        myFunction('xyz');
    </script>

</body>

</html>

Answer 2

您的if语句具有=，这是一个赋值，因此将覆盖该值而不是进行比较。您可以使用===（或==）进行比较。

您也可以直接访问href属性，而不必使用属性。

function myFunction(id) {
    var el = document.getElementById(id);
    var url = el.href;
    var els = document.querySelectorAll("a[n]");
    var i;
    for (i = 0; i < els.length; i++) {
        if(els[i].href === url) {
            myOtherFunction(els[i].id);
        }
    }
}

function myOtherFunction(id) {
    console.log(id);
}

<a id="abc" n="1" href="www.example.com" onclick="myFunction(this.id);return false">text</a>
<a id="def" n="2" href="www.anotherexample.com" onclick="myFunction(this.id);return false">text</a>
<a id="xyz" n="1" href="www.example.com" onclick="myFunction(this.id);return false">text</a>
<a id="ghi" n="1" href="www.anotherexample.com" onclick="myFunction(this.id);return false">text</a>

注意：仅添加return false是为了防止浏览器跟踪链接。

Answer 3

通用解决方案

这里的优势是，您可以搜索要查找的任何属性并输出 您想要的任何属性值。

function El(selector) {
  return document.querySelectorAll(selector);
}

function addListeners(els, type, listener) {
  for (var i = 0; i < els.length; i += 1) {
    var el = els[i];
    el.addEventListener(type, listener);
  }
}

// Get 'r' values from attribute 'search'
function getValues(els, that, search, r) {
  var res = [];
  for (var i = 0; i < els.length; i += 1) {
    var el = els[i];
    if (that.getAttribute(search) === el.getAttribute(search)) {
      res.push(el.getAttribute(r));
    }
  }
  return res;
}

function runOnEach(arr, fn) {
  for (var i = 0; i < arr.length; i += 1) {
    fn(arr[i]);
  }
}

// Create your own function
function f(val) {
  console.log(val);
}


function listener(e) {
  e.preventDefault();
  var arr = getValues(links, this, "href", "id");
  runOnEach(arr, f);
}

var links = El("a[n]");

addListeners(links, "click", listener);

<a id="abc" n="1" href="www.example.com">text</a>
<a id="def" n="2" href="www.anotherexample.com">text</a>
<a id="xyz" n="1" href="www.example.com">text</a>
<a id="ghi" n="1" href="www.anotherexample.com">text</a>

在“ for”，“ if”循环中的某些位置调用函数

3 个答案:

通用解决方案