Question

我对JQuery相当新，但我认为我想要的东西可以完成，我只是不确定如何去做。

我在页面上基本上有2个按钮。我想要的是当你点击一个按钮它显示内容＆＃34; l-text＆＃34;并隐藏按钮。它的工作方式我想要它只是打开并关闭它们的内容/按钮。我希望它只抓取相关内容。

HTML

<div class="l-rows">
<div class="l-buttons">
    <div class="l-images">
        <img src="/img/img.jpg" alt="">
    </div>
    <div class="l-text">
        <h1>
            HEADER
        </h1>
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>
<div class="l-buttons">
    <div class="l-images">
        <img src="/img/img2.jpg" alt="">
    </div>
    <div class="l-text">
        <h1>
            SECOND HEADER
        </h1>
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

JQuery的

/* Close Button - Open Text */
    $('.l-text').append('<i class="fa fa-times"></i>');
    $('.l-images').click(function(){
        $('.l-images').css({
            'opacity':'0',
            'transition':'all 300ms ease-in-out',
        })
        $('.l-images').delay(300).queue( function(next){ 
            $('.l-images').css('display','none'); 
            next(); 
        });
        $('.l-text').css({
            'opacity':'1',
            'transition':'all 300s ease-in-out',
        })
        $('.l-text').delay(300).queue( function(next){ 
            $('.l-text').css('display','inherit'); 
            next(); 
        });

    });
/* Close Text - Open Button */
$('.l-text .fa-times').click(function(){
    $('.l-text').css({
        'opacity':'0',
        'transition':'all 300mss ease-in-out',
    })
    $('.l-text').delay(300).queue( function(next){ 
        $('.l-text').css('display','none'); 
        next(); 
    });
    $('.l-images').css({
        'opacity':'1',
        'transition':'all 300s ease-in-out',
    })
    $('.l-images').delay(300).queue( function(next){ 
        $('.l-images').css('display','inherit'); 
        next(); 
    });
});

因此，不是重命名第二组div并编写更多代码。如何使点击功能仅获取相关内容？

感谢您的帮助，如果我提出的问题没有任何意义，请告诉我们。

Answer 1

您可以使用$（this） -

我已经安排了关闭选项，

为开场做同样的事情......

/* Close Button - Open Text */
$('.l-text').append('<i class="fa fa-times"></i>');
$('.l-images').click(function(){
    $(this).css({
        'opacity':'0',
        'transition':'all 300ms ease-in-out'
    });
    $(this).delay(300).queue( function(next){ 
        $(this).css('display','none'); 
        next(); 
    });
    $(this).parent(".1-buttons").find('.l-text').css({
        'opacity':'1',
        'transition':'all 300s ease-in-out'
    });
    $(this).parent(".1-buttons").find('.l-text').delay(300).queue( function(next){ 
         $(this).parent(".1-buttons").find('.l-text').css('display','inherit'); 
        next(); 
    });

});

working fiddle

Answer 2

 $('.l-images').click(function(){
        var $images = $(this);
        $images.css({
            'opacity':'0',
            'transition':'all 300ms ease-in-out',
        })
        $images.delay(300).queue( function(next){ 
            $(this).css('display','none'); 
            next(); 
        });
        $images.next().css({
            'opacity':'1',
            'transition':'all 300s ease-in-out',
        })
        $images.next().delay(300).queue( function(next){ 
            $(this).css('display','inherit'); 
            next(); 
        });

    });

JQuery的。仅将函数应用于关联的内容/ div

2 个答案: