我正在为我的Javascript入门课程做一个中期项目,我已经完成了所需的部分(一个图像库,您可以在其中单击缩略图来更改中心图像),但我也想在点击缩略图时更改中心图像下方段落中的文本(这不是项目的要求,也不是我们在课堂上教过的东西,但我想知道如何做,因为这会增强项目)。
我已经看了几个与此相关的答案,它们似乎都依赖于数组的手动填充,但我的段落文本会很长,所以如果可能的话,我想用类(.text)的成员自动填充数组。(或者找到其他解决方法。)我们已经学习了一些JQuery,但不允许在这个项目中使用它,这很遗憾,因为我相信使用它会更容易。以下是我项目的相关部分:
HTML:
<ul id="gallery">
<li>
<a href="images/charactername.gif" title="Character Name" id="first_link">
<img src="images/thumbs/charactername.png"></a>
<p class="text">Character Information</p>
</li>
<li>
<a href="images/charactername.gif" title="Character Name">
<img src="images/thumbs/charactername.png"/></a>
<p class="text">Character Information</p>
</li>
(several more similar blocks for different characters)
</ul>
<p><img src="images/character.gif" id="image"></p>
<h2 id="caption">Character Name</h2>
<p id="blurb">Large amount of text summarizing character's backstory/traits/etc.</p>
Javascript:
window.onload = function () {
var listNode = $("gallery");
var captionNode = $("caption");
var imageNode = $("image");
var imageLinks = listNode.getElementsByTagName("a");
var i, linkNode, image;
for ( i = 0; i < imageLinks.length; i++ ) {
linkNode = imageLinks[i];
linkNode.onclick = function (evt) {
var link = this; // link is the linkNode
imageNode.src = link.getAttribute("href");
captionNode.firstChild.nodeValue = link.getAttribute("title");
};
};
我可以很容易地使用标题设置字符名称,但在点击时更改下面的#blurb文本以匹配每个字符的信息段落是在逃避我。我觉得如果我能找到一种方法用段落#text自动填充数组,我应该能够将#blurb[I]的文本设置为array[I]或类似的内容,但我不确定。我非常感谢你的帮助。非常感谢。
我不知道你在课堂上是否会这样做,但我想我会添加一个你可能会这样做的例子。
var listNode = document.getElementById('list-node');
var imageLinks = listNode.getElementsByTagName("a");
var i;
var characterText;
for (i = 0; i < imageLinks.length; i += 1) {
// Add a click event listener
imageLinks[i].addEventListener("click", function (evt) {
// Prevent the default functioning
evt.preventDefault();
// Get the character text
characterText = getCharacterText(this.parentNode);
// Update the blurb
document.getElementById('blurb').innerText = characterText;
});
}
/**
* Returns the character text of an item in list-node.
*
* @param parentNode, the list item that contains the character
* description node.
* @return characterText, the text of the character description
*/
function getCharacterText(parentNode) {
return parentNode.getElementsByClassName('text')[0].innerText;
}
JS fiddle,就其价值而言:http://jsfiddle.net/9ekcgeyq/