如何使用 javascript 显示 li 标签的标题

Question

我最近发现了一个 javascript 图片库，并注意到它更改了 <li> 标记中的标题属性。我想知道如何使标题信息显示为文本并动态更新。一如既往，任何帮助表示赞赏。代码如下。

谢谢，

海天一色

JS：

<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
    #jgal li { filter: alpha(opacity=50); }
    #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<script type="text/javascript">
var gal = {
    init: function () {
        if (!document.getElementById || !document.createElement || !document.appendChild) return false;
        if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
        var li = document.getElementById('jgal').getElementsByTagName('li');
        li[0].className = 'active';
        for (i = 0; i < li.length; i++) {
            li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
            li[i].title = li[i].getElementsByTagName('img')[0].alt;
            gal.addEvent(li[i], 'click', function () {
                var im = document.getElementById('jgal').getElementsByTagName('li');
                for (j = 0; j < im.length; j++) {
                    im[j].className = '';
                }
                this.className = 'active';
            });
        }
    },
    addEvent: function (obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
            obj["e" + type + fn] = fn;
            obj[type + fn] = function () {
                obj["e" + type + fn](window.event);
            }
            obj.attachEvent("on" + type, obj[type + fn]);
        }
    }
}
gal.addEvent(window, 'load', function () {
    gal.init();
});
</script>

HTML：

<ul id="gallery">
<li><img src="images/paintings/image1.jpg" alt="Pennsylvania Ave./Linda --- 2006 --- oil and wallpaper on canvas"></li>
<li><img src="images/paintings/image2.jpg" alt="Mt. Vernon Ave. I --- 2007 --- oil and wallpaper on canvas"></li>
<li><img src="images/paintings/image3.jpg" alt="Northland, I --- 2006 --- oil and wallpaper on canvas"></li>
<li><img src="images/paintings/image4.jpg" alt="S.H.S./ Page. Arizonia --- 2007 --- oil on canvas"></li>
<li><img src="images/paintings/image5.jpg" alt="California/ Gum Tree --- 2005 --- oil and wallpaper on canvas"></li>
<li><img src="images/paintings/image6.jpg" alt="Oak Park Park, from Mexico love, Jennifer --- 2006"></li>
<li><img src="images/paintings/image7.jpg" alt="New Orleans Mall to Bryce Canyon --- 2006 --- oil on canvas"></li>
<li><img src="images/paintings/image8.jpg" alt="Hilton to Pierce Ave --- 2005 --- oil on canvas"></li>
<li><img src="images/paintings/image9.jpg" alt="Penn. Ave. Hear No Evil, Speak No Evil, See No Evil --- 2006 --- oil and wallpaper on canvas"></li>
<li><img src="images/paintings/image10.jpg" alt="Oak Park Park/Marlas House --- 2007 --- oil and wallpaper on canvas"></li>
</ul>

Answer 1

好的，在gal.addEvent(li[i], 'click', function (){ 函数中执行以下操作：

document.getElementById('caption').innerHTML = this.alt;

比你只需要一个标题的元素：

<div id="caption"></div>

这是你想要的吗？

Answer 2

我终于明白了。我使用了 Kau-Boy 建议的标题 div，然后将 javascript 更改为以下内容：

    var gal = {
    init: function () {
        if (!document.getElementById || !document.createElement || !document.appendChild) return false;
        if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
        var li = document.getElementById('jgal').getElementsByTagName('li');
        li[0].className = 'active';
        var captions =  li[0].getElementsByTagName('img')[0].alt;
        document.getElementById('caption').innerHTML = captions;
        for (i = 0; i < li.length; i++) {
            li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
            li[i].title = li[i].getElementsByTagName('img')[0].alt;
            gal.addEvent(li[i], 'click', function () {
                var im = document.getElementById('jgal').getElementsByTagName('li');
                for (j = 0; j < im.length; j++) {
                    im[j].className = '';
                }
                this.className = 'active';
                var captions = this.getElementsByTagName('img')[0].alt;
                document.getElementById('caption').innerHTML = captions;
            });
        }
    },
    addEvent: function (obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
            obj["e" + type + fn] = fn;
            obj[type + fn] = function () {
                obj["e" + type + fn](window.event);
            }
            obj.attachEvent("on" + type, obj[type + fn]);
        }
    }
}
gal.addEvent(window, 'load', function () {
    gal.init();
});