0

過去に正常に機能した単純なモーダル スクリプトがありますが、何らかの理由で 10 番目の画像以降は機能しなくなります。

        <div class = "images_container"> <!-- Image 1 -->
            <div class = "images image_1">
                <div class = "hover_alpha">
                    <div class = "plus">

                    </div>
                </div>
            </div>

            <div class = "images image_2"> <!-- Image 2 -->
                <div class = "hover_alpha">
                    <div class = "plus">

                    </div>
                </div>
            </div>

            <div class = "images image_3"> <!-- Image 3 -->
                <div class = "hover_alpha">
                    <div class = "plus">

                    </div>
                </div>
            </div>

<div id="image_1_content"> 
        <img src = "images/1.jpg">
</div>
<div id="image_2_content"> 
        <img src = "images/2.jpg">
</div>
<div id="image_3_content"> 
        <img src = "images/3.jpg">


        $('.image_1').click(function () {
            $('#image_1_content').modal({
                close: true,
                overlayClose:true,
                position: [150,70],
                opacity:80,
                overlayCss: {backgroundColor:"#fff"}                    
            });

            return false;
        });

        $('.image_2').click(function () {
            $('#image_2_content').modal({
                close: true,
                overlayClose:true,
                opacity:80,
                position: [150,70],
                overlayCss: {backgroundColor:"#fff"}                    
            });

            return false;
        });

        $('.image_3').click(function () {
            $('#image_3_content').modal({
                close: true,
                overlayClose:true,
                opacity:80,
                position: [150,70],
                overlayCss: {backgroundColor:"#fff"}                    
            });

            return false;
        });

コードは 21 番目の画像とほとんど同じです。ただし、スクリプトは、10 番目の画像から開始して、9 番目の画像以降は機能しません。なぜ、またはどのようにこれが起こっているのか、私は困惑しています。入力はありますか？

参考：http ://spuxystudios.com/cocktails/

4

4 に答える 4

0

クラスセレクターを使用し、それらを繰り返し処理するか、コードを統合して使用するコードを減らす必要があります。また、タイプミスや構文関連のバグの可能性が低くなります。また、機能していますが、ビューポートの外に配置されています。ズームアウトするだけで表示されます。要素がドームにどのように落ちたかに基づいて配置されます。したがって、モーダルの配置方法を修正してください。それで全部です！

于 2013-10-02T23:02:53.730 に答える
0

参照したページposition: [150, 70]で、より高い値に変更するとposition: fixed、モーダルが表示されない場所に表示されます。どこにでも置くposition: [150, 70]。また、@Casey のアドバイスに従い、反復を使用してコードの量を減らす必要があります。

于 2013-10-02T23:08:46.047 に答える