Question

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

谢谢，

Mraisky

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();
});

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

2 个答案: