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

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 に答える