-2

誰かが にカーソルを合わせたときに、配列内のすべての画像を表示 (フェードイン) したいと思いますClass of 2013。

これまでのところ、ホバーオーバー時に1つの画像を表示できます...

それらをすべて同じに送信できます<img src...か?

問題は、私には 3 つのクラスがあるということです...そして、画像パスの各配列の長さは異なります...そのため、正しい数の要素を動的に配置して、クラスごとに指定された量の画像を表示し2013, 2014, 2015たいと考えています 。img src

これが私の現在のコードです：

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

    <script type="text/javascript">     
        var ITLP = new Array();
        ITLP[0] = "./name1.jpg";
        ITLP[1] = "./name2.jpg";
        var max = ITLP.length;

        $(document).ready(function() {
            showimg();          
        });


   function showimg()
        {
            $(".box > .overlay > img").attr("src",getImages());

            $(".box").hover(
                function(){ $(this).find(".overlay").fadeIn(); } ,
                function(){ $(this).find(".overlay").fadeOut(); }
            );        
        }
    function getImages()
    {       
        console.log(max);
        var i = Math.floor(Math.random()*max);    
        console.log(ITLP[i]);
        return ITLP[i];             
    }
    </script>


</head> 
<body>              
    <div class="box">
        Class of 2013:
        <div class="overlay"> <!-- Put ITLP images to display here...-->                
            <img src="" border="none"/>             
        </div>
    </div>​

</body>
</html>
4

1 に答える 1

2

classes便宜上、次のようにすべての配列をオブジェクトに格納します。

var classes = { 
    2011: [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'],
    2012: [
    'image4.jpg'
    'image5.jpg'],
    2013: [
    'image6.jpg']
};

次に、属性を使用して、表示したい年に関する情報を DOM 要素内に配置します。idまたはを使用できますdata-attribute。

次に、JavaScript コードは次のようになります。

$(element).on('mouseover', function(e){

    // First, empty the overlay element to avoid images
    // to be added over and over again.
    $('#overlay').empty();

    // Let's dynamically change the title accessing the
    // data stored in our element (I assumed it was id)
    var title = $('<h2>');
    title.text('Class of ' +  e.target.id);
    $('#overlay').append(title);

    // Loop through the target array and add an image tag
    // for each element of your images array.
    $(classes[e.target.id]).each(function(idx, entry){
      var img = $('<img/>');
      img.attr('src', entry);
      $('#overlay').append(img);
    });

});

私はあなたのために非常に簡単な例を編集しました：

Working example

于 2013-07-23T17:07:48.663 に答える