Question

最近，我一直在尝试使用CSS和jQuery动画，但它进展顺利，但现在我想做更多。也就是说，一旦用户点击信息应显示在图像上方。

目前，我只有几个标签可以执行动画和类切换。

我的问题是，我考虑过做以下事情：

<div class= "singleImage">
    <img src.... class="actualImage">
    <p>text to put over the image</p>
</div>

这将按照图像完成，这意味着我将有大约5个图像具有不同的图像。

但是，我不知道如何选择课程的前一个元素＆＃34; actualImage＆＃34;。

有人有任何建议吗？

谢谢

Answer 1

使用jQuery prev函数。示例：假设您要选择第二张图像之前的图像：

var foo = $(".singleImage").eq(1);
var bar = $(foo).prev().find('.actualImage');

Fiddle

Answer 2

试试这个：

$('singleImage').children('.actualImage').prev();

Answer 3

我不确定你为什么要选择上一个元素，但你可以做类似的事情：

将函数绑定到包含图像和标题的元素的click事件。
- 在此功能中，切换标题。
- 此外，将点击事件处理程序绑定到正文以检测点击次数＆＃34; off＆＃34;包含元素。

HTML：

<a href="#" class="has-caption">
    <img src="http://placehold.it/300x300" />
    <span class="caption">This is a caption</span>
</a>

CSS：

a.has-caption { position: relative; }
a.has-caption .caption {
    background: rgba(0, 0, 0, .25);
    bottom: 0;
    color: #fff;
    display: none;
    height: 20px;
    left: 0;
    line-height: 20px;
    position: absolute;
    width: 100%;
}
a.has-caption img { vertical-align: bottom }

的JavaScript

$('a.has-caption').on('click', function(e) {
    e.preventDefault(); e.stopPropagation();
    var self  = $(this)
      , tmpId = 'toggle-' + Date.now();
    self.addClass(tmpId);
    $('span.caption', self).toggle();
    $('body').one('click', function(e) {
        if (!$(event.target).closest('.' + tmpId).length) {
            $('span.caption', '.' + tmpId).hide();
            self.removeClass(tmpId);
        };
    });
});

http://jsfiddle.net/83s7W/

选择前一个父jQuery的子代

3 个答案: