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