Question

我正在为我的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文本以匹配每个角色的信息段落onclick正在回避我。我觉得如果我能找到一种用#text段自动填充数组的方法，我应该能够将#blurb的文本设置为array [i]或类似的东西，但我不确定。我非常感谢一些帮助。谢谢。

Answer 1

我不知道你是否会在课堂上这样做，但我想我会举一个如何做的例子。

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小提琴，因为它值得：http://jsfiddle.net/9ekcgeyq/

更改图像上的段落文本单击（Javascript）

1 个答案: