javascript - 查询。仅将功能应用于关联的内容/div

Question

我是 JQuery 的新手，但我认为我想要的可以实现，我只是不确定如何去做。

我基本上在一个页面上有 2 个按钮。我想要的是，当您单击一个按钮时，它会显示内容“l-text”并隐藏该按钮。它按照我希望的方式工作，只是打开和关闭它们的内容/按钮。我希望它只抓取相关内容。

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