单击图像时更改段落文本(Javascript）

Changing paragraph text on image click (Javascript)

本文关键字：文本 Javascript 段落 图像 单击      更新时间：2023-09-26

我正在为我的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/

相关文章：