0

我一个接一个地多次使用此 HTML 代码：

<li>
   <img src="path/to/my/picture.jpg" alt="my picture" />
   <span>picture title</span>
</li>

我正在尝试获取变量中标记src属性内的路径值img，以及另一个变量中跨度内的文本。

我试过这段代码，但它不工作：

clickedLi.onclick = function() {
    var imgPath = clickedLi.firstChild;
    var pathLi = imgPath.getAttribute("src");

    var imgTitle = clickedLi.lastChild;
    var titleLi = imgTitle.data;

该clickedLi变量只是一个循环遍历包含li文档中所有标签的数组的变量。

所以这是我拥有的完整的 JavaScript 代码：

var myLis = document.getElementsByTagName('li');
var liCnt = myLis.length; 
for(var i = 0; i < liCnt; i++) {
    var currentLi = myLis[i];
    currentLi.onclick = function() {                

        var imgPath = firstElementChild(this);
        var pathLi = imgPath.getAttribute("src");

        var imgTitle = lastElementChild(this);
        var titleLi = imgTitle.firstChild.data;

        var myImgDiv = document.getElementById("test");
        myImgDiv.innerHTML = '<h2>' + titleLi + '</h2>';
        myImgDiv.innerHTML = '<img src="' + pathLi + '" alt="' + titleLi + '">' 

    }
}
4

3 回答 3

3

使用.firstElementChildand.lastElementChild来避免空白文本节点。

如果您支持旧版浏览器，则需要 shim。

function firstElementChild(el) {
    var child = el.firstElementChild;
    if (!child) {
        child = el.firstChild;
        while (child && child.nodeType !== 1)
            child = child.nextSibling;
    }
    return child;
}

function lastElementChild(el) {
    var child = el.lastElementChild;
    if (!child) {
        child = el.lastChild;
        while (child && child.nodeType !== 1)
            child = child.previousSibling;
    }
    return child;
}

clickedLi.onclick = function() {
    var imgPath = firstElementChild(this); //<-- use "this", not "clickedLi"
    var pathLi = imgPath.getAttribute("src");

    var imgTitle = lastElementChild(this); //<-- use "this", not "clickedLi"
    var titleLi = imgTitle.firstChild.data;

    var myImgDiv = document.getElementById("test");

      // Concatenate the strings to do a single assignment to .innerHTML
    myImgDiv.innerHTML = '<h2>' + titleLi + '</h2>' +
                         '<img src="' + pathLi + '" alt="' + titleLi + '">';
};
于 2012-04-11T15:21:11.027 回答
0

下面的代码做你想要的：

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var lis = document.getElementsByTagName("li");
                    for(var i = 0, ceiling = lis.length; i < ceiling; i++) {
                        lis[i].onclick = function() {
                            var childNodes = this.childNodes;
                            for(var j = 0, ceiling2 = childNodes.length; j < ceiling2; j++) {
                                if(childNodes[j].nodeType == 1) {
                                    if(childNodes[j].nodeName == "IMG") {
                                        alert(childNodes[j].src);
                                    } else if(childNodes[j].nodeName == "SPAN"){
                                        alert(childNodes[j].innerHTML);
                                    }
                                }
                            }
                        }
                    }
                }
            };
        </script>
    </head>
    <body onload="p.onload()">
        <ul>
            <li>
                <img src="path/to/my/picture1.jpg" alt="my picture" /> <span>picture title1</span>
            </li>
            <li>
                <img src="path/to/my/picture2.jpg" alt="my picture" /> <span>picture title2</span>
            </li>
        </ul>
    </body>
</html>
于 2012-04-11T15:28:36.933 回答
0

使用此 HTML：

<ul id="mylist">
    <li>
       <img src="path/to/my/picture1.jpg" alt="my picture" />
       <span>picture title 1</span>
    </li>
    <li>
       <img src="path/to/my/picture2.jpg" alt="my picture" />
       <span>picture title 2</span>
    </li>
    <li>
       <img src="path/to/my/picture3.jpg" alt="my picture" />
       <span>picture title 3</span>
    </li>
</ul>

你可以这样做：

var listItems = document.getElementById("mylist").getElementsByTagName("li");
for (var i = 0, len = listItems.length; i < len; i++) {
    listItems[i].onclick = function() {
        var spanObj = this.getElementsByTagName("span")[0]; 
        var spanText = spanObj.textContent || spanObj.innerText;
        var imgSrc = this.getElementsByTagName("img")[0].src;
        // now you have imgSrc and spanText here to do with as you please
    };
}

在这里工作演示：http: //jsfiddle.net/jfriend00/ju9uZ/

在加载文档后运行此代码。最简单的方法是将此代码放在</body>标记之前，内联或包含在 .js 文件中。

于 2012-04-11T15:30:48.430 回答