单击父级时获取p文本。 P是许多同一类的组

时间:2015-08-01 11:58:55

标签: jquery html5 css3

对于一个函数,我正在处理,当需要点击父(.photoBackground)时,我需要获得精确的P文本。 p用作图库的标题,因此有很多P具有相同的类别。我需要点击我点击的文字。然后我想将该特定文本复制到空.photoCaptionBig类。我已经有了一个点击功能(其他一些功能需要它):$('.photoBackground').on('click',function ()。怎么做?

HTML:



            <div id="lightbox_caption_container">
                <a id="lightbox"></a>
                <div class="photoCaptionEffect">
                    <p class="photoCaptionBig" style="               
    "></p>
                </div>
            </div>

<div class="itemContainer">
                        <div class="photoBackground" id="photo1">
                            <div class="photoHoverEffect">
                                <p class="photoCaption" style="               
">TextTextText</p>
                            </div>
                        </div>
                    </div>
&#13;
&#13;
&#13;

和CSS:

&#13;
&#13;
.photoBackground {
    transition: box-shadow 0.3s ease;   
}
.photoBackground:hover{
    box-shadow: 0 0 0.938em rgba( 0, 0, 0, .7 );
    transition: box-shadow 0.3s ease;
}
.photoBackground:hover .photoHoverEffect {
    transition: opacity 0.4s ease;
    opacity: 1;
}
.photoHoverEffect, .photoCaptionEffect {
    height: 65px;
    width: 100%;
    margin-top: 155px;
    background-color: rgba(18,18,18,0.6);
    display: -webkit-inline-box;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.photoCaptionEffect {
    height: 85px;
    opacity: 1;
    position: absolute;
    z-index: 1333;
    margin-top: 365px;  
}
.photoCaption, .photoCaptionBig {
    font-family: raleway;
    font-size: 13px;
    color: #fff;
    margin-top: 8px;
    margin-left: 8px;
    line-height: 16px;
    display: -webkit-inline-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
&#13;
&#13;
&#13;

谢谢!

  • Magnus Pilegaard

1 个答案:

答案 0 :(得分:1)

在jquery中,如果单击一个对象,则处理单击事件,如此

$('selector').click(function() {
    //to find a p within what was clicked
    var $p = $(this).find('p');
    //if the p has a particular class
    var $p = $(this).find('p.particularClass');
    //to get the text in the p
    var $text = $p.text();
});

干杯。