1

我试图通过添加 $opened = false;并进一步跟进来更改此脚本。目的是一次只允许打开一个.textwrapdiv，因此当您单击另一个 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

$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 回答
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

在hover显示内容时，似乎与点击冲突。这是一种没有该hover部分的方法。我所做的只是在单击时添加一个类，并在单击另一个项目时检查具有该类的元素是否存在。

$('.smallwrap').click(function(){
    // store $(this) for later use
    $this = $(this);
    // if you've clicked on an open item, close it
    if($this.hasClass('opened')){
        $('.smallwrap').removeClass('opened');
        $('.textwrap').stop().fadeOut(200);
    } else {
        // if an open item exists
        if($('.opened').length != 0){
            // fade out the opened item
            $('.opened').children('.textwrap').fadeOut(200, function(){
                $('.smallwrap').removeClass('opened'); 
                // fade in the item you clicked on
                $this.addClass('opened');
                $this.children('.textwrap').stop().fadeIn(200); 
            });
        } else {
            // fade in the item you clicked on
            $this.addClass('opened');
            $this.children('.textwrap').stop().fadeIn(200); 
        }
    }
});

jsfiddle - http://jsfiddle.net/fZkh7/（我给你的图像一个红色背景用于调试）

编辑

我设法得到了hover工作：

$('.smallwrap').hover(function () {
    $(this).children('.textwrap').stop().fadeIn(200);
}, function () {
    if ($(this).hasClass('opened')) {
        // do nothing
    } else {
        // hide if it isn't already opened
        $(this).children('.textwrap').stop().fadeOut(150);
    }
});

$('.smallwrap').click(function(){
    // store $(this) for later use
    $this = $(this);
    // if you've clicked on an open item, close it
    if($this.hasClass('opened')){
        $('.smallwrap').removeClass('opened');
        $('.textwrap').stop().fadeOut(200);
    } else {
        // if an open item exists
        if($('.opened').length != 0){
            // fade out the opened item
            $('.opened').children('.textwrap').fadeOut(200, function(){
                $('.smallwrap').removeClass('opened'); 
                // fade in the item you clicked on
                $this.addClass('opened');
                $this.children('.textwrap').stop().fadeIn(200); 
            });
        } else {
            // fade in the item you clicked on
            $this.addClass('opened');
            $this.children('.textwrap').stop().fadeIn(200); 
        }
    }
});

jsfiddle - http://jsfiddle.net/fZkh7/1/

于 2013-04-17T11:16:44.673 回答