0

当有人将鼠标悬停在匹配的班级年份时，我想显示图像及其各自的标题。

在帮助下，我已经能够仅显示基于班级年份的图像......但现在我需要下面的标题。使用 PHP 和数据库，我可以轻松地从数据库字段中获取此信息……但我在这里只使用 Javascript。

我正在尝试实现这样的目标：

<html>
<head>
    <script src="jquery.js"></script>

    <script type="text/javascript">     
        var classes = {
            2011: [
                "/name1.jpg", "name 1",
                "/name2.jpg", "name 2"],
            2012: [
                "/name3.jpg", "name 3",
                "/name4.jpg", "name 4"],
            2013: [
                "/name5.jpg", "name 5",
                "/name6.jpg", "name 6"]
            };

        jQuery(document).ready(function($){

          $('li').on('mouseover', function(e){
            $('#overlay').empty();
            var title = $('<h2>');
            title.text('Class of ' +  e.target.id);
            $('#overlay').append(title);
            $(classes[e.target.id]).each(function(idx, entry){
              var img = $('<img/>');
              img.attr('src', entry);
              $('#overlay').append(img);
            });         
          });         
        });

    </script>

</head> 
<body>              
    <ul id="classes">
        <br>
        <li id="2011">Class of 2011</li>
        <li id="2012">Class of 2012</li>
        <li id="2013">Class of 2013</li>
    </ul>

    <div id="overlay"></div>
</body>
</html>
4

1 回答 1

0

你的数组结构很奇怪。您可能应该将它们更改为类似

var classes = {
    2011: [
        {src:"/name1.jpg", title:"name 1"},
        {src:"/name2.jpg", title:"name 2"}
    ],
    2012: …
}

使用您当前的结构，循环应该是这样的：

var arr = classes[e.target.id];
for (var i=0; i<arr.length; i+=2)
     $('#overlay').append(
         $('<img/>', {'src': arr[i], 'alt': arr[i+1]}),
         $('<p/>', {'text': arr[i+1]}) // or something
     );
于 2013-07-23T21:19:55.753 回答