Question

我正在学习jquery和javascript。我有一个案例，我想将类应用于锚列表。目标是添加类我可以应用一组5种类型的字体。在这种情况下Roboto。

我已将类名放在数组中以供字体使用。然后我收集了所有具有我想要应用不同字体的类名的元素。我想将该字体数组的一个类名添加到每个单独的元素中。

我陷入了思绪中，我想要一些帮助。

	fonts =["100", "400", "500", "500i", "900"];
	facsimiletitle = $('.facsimile-title');
	

	facsimiletitle.addClass( 
		function(index) {
			return fonts[index];
		}	
	);
	
	function addFontToTitle() {
		for ( var i = 0; i < fonts.length; i++ ) {
			return "font" + fonts[i];
		}
	}

@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,500i,900');

.font100 {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

.font400 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.font500 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.font500i {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-style: italic;
}

.font900 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a><a href="#" class="facsimile-title">Test</a>

Answer 1

因为你在循环中使用return语句。因此循环将在第一次迭代后终止。

 var arr1[];
    for ( var i = 0; i < fonts.length; i++ ) {
         arr1.push("font"+fonts[i]);
            }
    return arr1;

这将在你的函数中创建一个新数组并追加这个数组，在循环之后我们将返回新创建的数组。

for循环在javascript

1 个答案: