当我发送一个变量作为前一个函数的包装函数时，我无法理解我做错了什么。
function GetColor必须在输入中重现两个值（variable sort和variable a），然后进行比较。如果a[i].getAttribute('href')的某些值与sort[i]的值匹配，请在屏幕上打印这些tags a并在tags a内以黄色绘制这些DOM
现在，我在"http://internal.com/" func中先前丢弃的值GetSort上对GetColor的输出进行了奇怪的排序。
我认为传递函数参数的错误知识存在错误。
我将感谢你的帮助。
<script>
let a = document.body.getElementsByTagName('a');
function getList(list) { // creating an array from all a tag elements.
let arr = [];
for (let i = 0; i < a.length; i++) {
if (a[i].getAttribute('href')) {
arr.push(a[i].getAttribute('href'));
}
}
return arr;
};
function getSort(f) { // sort array given from getList() by symbols 'http'...
let sorting;
let arr = [];
for (let i = 0; i < f.length; i++) {
if (f[i].includes('://') && !f[i].includes('http://internal.com/')) {
console.log(f[i]);
arr.push(f[i]);
}
}
return arr; // [ "http://google.com" , "ftp://ftp.com/my.zip" ,
// "http://nodejs.org" ]
};
let sort = getSort(getList());
console.log(sort);
function getColor(sort) { // paint a tags based on sort elements from getSort()
for (let i = 0; i < a.length; i++) {
if (a[i].getAttribute('href') == sort[i]) {
a[i].setAttribute('class', 'external'); // paint sorted a tags in DOM
// by [external] attribute
console.log(a[i]);
}
}
return a;
}
getColor(a);
</script>
HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.external {
background-color: yellow
}
</style>
</head>
<body>
<a name="list">list</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
<li><a href="local/path">local/path</a></li>
<li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
<li><a href="http://nodejs.org">http://nodejs.org</a></li>
<li><a href="http://internal.com/test">http://internal.com/</a></li>
</ul>
</body>
</html>
答案 0 :(得分：1)
好的。
如果添加一些日志语句，您可以确切地看到发生了什么：
let a = document.body.getElementsByTagName('a');
function getList(list) { // creating an array from all a tag elements.
let arr = [];
for (let i = 0; i < a.length; i++) {
if (a[i].getAttribute('href')) {
arr.push(a[i].getAttribute('href'));
}
}
return arr;
};
function getSort(f) { // sort array given from getList() by symbols 'http'...
let sorting;
let arr = [];
for (let i = 0; i < f.length; i++) {
if (f[i].includes('://') && !f[i].includes('http://internal.com/')) {
console.log(f[i]);
arr.push(f[i]);
}
}
return arr; // [ "http://google.com" , "ftp://ftp.com/my.zip" ,
// "http://nodejs.org" ]
};
let sort = getSort(getList());
function getColor(sort) { // paint a tags based on sort elements from getSort()
for (let i = 0; i < a.length; i++) {
console.log( 'a' );
console.log( a[ i ] );
console.log( a[ i ].getAttribute( 'href' ) );
console.log( 'sort' );
console.log( sort[ i ] );
console.log( sort[ i ].toString() );
console.log( a[ i ].getAttribute( 'href' ) == sort[ i ] );
console.log( '-----' );
if (a[i].getAttribute('href') == sort[i]) {
a[i].setAttribute('class', 'yellow'); // paint sorted a tags in DOM
// by [external] attribute
}
}
return a;
}
getColor(a);.yellow {
background-color: yellow
}<a name="list">list</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
<li><a href="local/path">local/path</a></li>
<li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
<li><a href="http://nodejs.org">http://nodejs.org</a></li>
<li><a href="http://internal.com/test">http://internal.com/</a></li>
</ul>
a是在函数外部定义的节点列表。
然后使用sort
getSort()数组
最后，您使用getColor()而不是a来致电sort。
所以基本上你将a与自己进行比较。
由于a包含html节点，sort也包含html节点。
所以当你使用a[i].getAttribute( 'href' )时，你会得到一个字符串。
然后将该字符串与其自己的节点进行比较。
由于您使用==（比较值）而不是===（comapre值和类型），sort中的节点（与{{1}中的节点相同） }）将调用自己的toString（）函数将其强制转换为字符串。
正如您在我添加的console.log语句中所看到的，a属性最后返回href，如果该链接尚未包含一个（如http://internal.com/test）
由于/与http://google.com/不同，因此您会收到错误消息。与http://google.com和http://nodejs.org/相同。
因此只有http://nodejs.org和ftp://ftp.com/my.zip满足条件并以黄色打印。
如果我必须写这个，我会选择这样的东西。 它并没有包含这些功能，但显示了我要遵循的工作流程。
http://internal.com/test// 0) Get the array of tag elements.
const hyperlinks = document.querySelectorAll( 'a' );
// 1) Creating an array from all a tag elements.
const ary_hyperlinks = Array.from( hyperlinks );
// If your browser doesn't support Array.from(), you can use the slice method.
// const ary_hyperlinks = Array.prototype.slice.call( hyperlinks );
// 2) Sort array given from getList() by symbols 'http'.
// Since your code doesn't actually do any SORTING as we understand sorting, i'll just write what I think the question is.
// Since the assignment doesn't actually say that you have to reorder the elements in sorted order, this operation basically does nothing.
// If you have to reoder the elements while you color them yellow, we'd need to adjust the code.
const sorted_filtered_hyperlinks = ary_hyperlinks
// Filter out all links that don't have a href attribute including http, ftp and that are not internal.
.filter( function( node ) {
const uri = node.getAttribute( 'href' );
if ( uri ) return !uri.includes( 'internal' ) && uri.includes( 'http' ) || uri.includes( 'ftp' );
else return false;
} )
// Sort the links by type. Since the type is the start of the href attribute of the link, this comes down to sorting the urls alphabetically
.sort( function( first, second ) {
// Alphabetically earlier eltters are smaller than later letters.
if ( first.getAttribute( 'href' ) < second.getAttribute( 'href' ) ) return 1;
else return -1;
} );
// 3) paint a tags based on sort elements from getSort()
sorted_filtered_hyperlinks.forEach( function( node ) {
node.setAttribute( 'class', 'yellow' );
} );.yellow {
background-color: yellow
}
答案 1 :(得分：0)
我不能评论你的问题，这是我想要做的事情。多亏了，我的问题似乎也不清楚。 但是你的代码中几乎没有问题。
function getList ：你在定义中指定一个你从不使用的列表参数，最好不要把我认为。就个人而言，我将保留参数并避免在我的函数a [i]中使用外部范围变量...并确保该函数仅在传递适当的变量时才能完成其工作。
function getSort ：如果我关注得很好，那么构建一个新的链接数组（不包括以http://internal.com/开头的链接只是一个功能？ Rigth？然后局部变量排序在做什么？你永远不会归还它，也不会用它来做你内心的任何事情。
function getColor ：你调用getColor（a），所以请记住a是通过sort parmater引用getColor引用的。因此在你的getColor排序和a是相同的。你在getColor函数中一直比较同样的事情
有人可以说我错了这一切。 写你的功能来完成他们的工作，用他们自己的参数/参数，并避免直接使用任何外部参数他们将是我的建议