如果在这个jquery脚本中有语句或else语句？

时间：2013-04-17 10:04:11

标签： jquery if-statement

我尝试通过添加$opened = false;并进一步跟进来更改此脚本。目的是一次只能打开一个.textwrap 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;
}

3 个答案:

答案 0 :(得分：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');
        });
    });

答案 1 :(得分：0)

全局变量$opened不能在此方案中使用，因为它不会告诉哪些文本可见。另一种方法是标记点击的文本（通过为其指定一个虚拟类）

我创建了带有工作解决方案的jsFiddle here

这是我使用的代码。

$('.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);
          });          
        });
    });

答案 2 :(得分：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/

相关问题
最新问题