更改图像上的段落文本单击(Javascript)

时间:2014-10-20 11:14:57

标签: javascript arrays

我正在为我的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]或类似的东西,但我不确定。我非常感谢一些帮助。谢谢。

1 个答案:

答案 0 :(得分:0)

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

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/