1

$opened = false;さらに下に追加してフォローアップすることで、このスクリプトを変更しようとし ました。意図は、一度に 1 つの div だけをクリック.textwrapして開くことができるようにすることでした。そのため、別の div をクリックすると、最初の div がフェードアウトし、2 番目の div がフェードインします。.textwrap次の をクリックして開く前に、もう一度.textwrap. にスワップしようとif ( $opened == false )しelse ( $opened == false )たところ、スクリプトが完全にクランクされました。ここでいくつかのガイダンスをいただければ幸いです。ありがとう

jQuery:

<script>
    $opened = false;

    $('.smallwrap').each(function(){
        var text = $(this).find('.textwrap'),
            pic = $(this).find('.picwrap'),
            clicked = false;

        $(this).hover(function(){
            $(text).stop().fadeIn(200);
        }, function(){
            if ( clicked == false ) {
                $(text).stop().fadeOut(150);
            } else {
                // do nothing
            }
        });

        $(this).on('click', function(){
            if ( clicked == false ) {
                if ( $opened == false ) {
                    $(text).show();
                    clicked = true;
                    $opened = true;
                }
            } else {
                $(text).stop().fadeOut(150, function(){
                clicked = false;
                $opened = false;
            });
        }
        });
    });
</script>

HTML:

<div id="infowrap">
    <div class="mainwrap">
        <div class="smallwrap">
            <div class="picwrap"><a href="#"><img class="pic" alt="pic1" src="img/pic1.jpg"></a></div>
            <div class="textwrap"><p>Mustache art party pug whatever mixtape, pork belly sriracha gentrify swag. Try-hard selvage butcher high life, hashtag DIY ennui.</p></div>
        </div>

        <div class="smallwrap">
            <div class="picwrap"><a href="#"><img class="pic" alt="pic1" src="img/pic1.jpg"></a></div>
            <div class="textwrap"><p>Mustache art party pug whatever mixtape, pork belly sriracha gentrify swag. Try-hard selvage butcher high life, hashtag DIY ennui.</p></div>
        </div>

        <div class="smallwrap">
            <div class="picwrap"><a href="#"><img class="pic" alt="pic1" src="img/pic1.jpg"></a></div>
            <div class="textwrap"><p>Mustache art party pug whatever mixtape, pork belly sriracha gentrify swag. Try-hard selvage butcher high life, hashtag DIY ennui.</p></div>
        </div>

        <div class="smallwrap">
            <div class="picwrap"><a href="#"><img class="pic" alt="pic1" src="img/pic1.jpg"></a></div>
            <div class="textwrap"><p>Mustache art party pug whatever mixtape, pork belly sriracha gentrify swag. Try-hard selvage butcher high life, hashtag DIY ennui.</p></div>
        </div>
    </div>
</div>

CSS:

#infowrap {
    background: rgba(255,255,255,0.96);
    z-index: 900;
    display: none;
    position: fixed;
    top:10px;left:10px;right:10px;bottom:10px;
    vertical-align: center;
}

.mainwrap {
    width: 540px;
    height: 540px;
    margin: 50px auto 0 auto;
}

.smallwrap {
    width: 250px;
    height: 250px;
    margin: 10px;
    float: left;
    position: relative;
}

.picwrap {
    width: 250px;
    height: 250px;
}

.pic {
    width: 250px;
    height: 250px;
}

.textwrap {
    width: 200px;
    height: 250px;
    position: absolute;
    display: none;
}

.smallwrap:nth-child(1) .textwrap {
    left: -225px;
    top: 0px;
}

.smallwrap:nth-child(2) .textwrap {
    right: -225px;
    top: 0px;
}

.smallwrap:nth-child(3) .textwrap {
    left: -225px;
    bottom: 0px;
}

.smallwrap:nth-child(4) .textwrap {
    right: -225px;
    bottom: 0px;
}
4

3 に答える 3

0

html 部分で、この変更を行います。

<div class="smallwrap" isopen="false">

そしてあなたの新しいJavaScript;

    $('.smallwrap').each(function () {
        var text = $(this).find('.textwrap'),
            pic = $(this).find('.picwrap'),
            isopen = $(this).attr('isopen');

        $(this).hover(function () {
            $(text).stop().fadeIn(200);
        }, function () {
            if (isopen == false) {
                $(text).stop().fadeOut(150);
            } else {
                // do nothing
            }
        });

        $(this).on('click', function () {
            $('.textwrap').stop().fadeOut(150, function () { });
            $(text).show();
            $('.smallwrap').attr('isopen', 'false');
            $(this).attr('isopen','true');
        });
    });

于 2013-04-17T10:47:17.733 に答える
0

グローバル変数$openedは、どのテキストが表示されているか分からないため、このシナリオでは使用できません。別のアプローチは、クリックされたテキストをマークすることです（ダミークラスを割り当てることにより）

ここで、実用的なソリューションを使用してjsFiddleを作成しました

これは私が使用したコードです。

$('.smallwrap').each(function(){
        var text = $(this).find('.textwrap'),
            pic = $(this).find('.picwrap'),
            clicked = false;

        $(this).hover(function(){
            $(text).stop().fadeIn(200);
        }, function(){
            if ( !text.hasClass('isClicked')) {
                $(text).stop().fadeOut(150);
            } 
        });

        $(this).on('click', function(){          
          $('.textwrap','.smallwrap').removeClass('isClicked').stop().fadeOut(150, function(){
            $(text).addClass('isClicked').stop().fadeIn(200);
          });          
        });
    });
于 2013-04-17T11:07:42.220 に答える