Question

单击图像时，我会弹出一个叠加层。叠加层应该有一张图片和一个段落。它出现，显示图片，但不显示用CSS＆＃34; display：none;＆＃34;显示已隐藏在实际页面中的段落。功能，并在叠加层出现后再次使用jQuery显示。相反，它显示段落所在的＆＃34; [object Object]。我需要它来显示段落的实际文本，而不是简单地注册那里有东西......

我查看了jQuery文档，这似乎让我最接近我正在寻找的东西。在此之前，我没有得到段落应该是什么。但是，我已经工作了3个小时，我很难过。有没有人有任何建议？

HTML

<div class="INScarItem target">
  <a href="../INSnat.jpg">
    <img src="../INSnat.jpg" alt="Barrows carries Nationwide Insurance" />
  </a>
  <p class="testerTesty hide4target">
    This is a test!!! It has passed!
  </p>
</div>

CSS

#overlay {
    background: rgba(0,0,0,.9);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    text-align: center;
}

#overlay img {
    max-width: 60%;
    max-height: 80%;
    margin: 8% 20% 0;
}

#overlay p {
    color: #fff;
}

.hide4target {
    display: none;
}

的jQuery

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

//Add image
$overlay.append($image);

//Add overlay
$("body").append($overlay)

//Add caption
$overlay.append($caption);


//Capture the click event on a link to an image
$(".target a").click(function(event){
    event.preventDefault();
    var piclink = $(this).attr("href");
    var capText = $(this).children(":hidden").show();

    //Update overlay with the image linked
    $image.attr("src", piclink);

    //Update overlay with the caption text
    $caption.text(capText);

    //Show the overlay
    $overlay.show();

});

//When overlay is clicked 
$overlay.click(function(){
    //Hide the overlay
    $overlay.hide();

});

Answer 1

你没有获得段落的文本内容，而是完整的jQuery集合（顺便说一句，因为p不是a的孩子，而是兄弟姐妹），因为{{1方法返回jQuery对象。当您稍后尝试将此集合设置为文本内容时，对象的show方法会生成toString字符串。

您可以像这样修改代码：

[object Object]

演示：http://jsfiddle.net/b31j9oj9/

Answer 2

在案例$(this).children(":hidden")中，您搜索标记＆lt; a＆gt;，但＆lt; p>位于父标签＆lt; div class =＆＃34; INScarItem target＆＃34; ＆GT;

试试这个

var capText = $(this).siblings(":hidden").show();

$caption.text(capText.text());

演示：http://jsbin.com/xehazu/1/edit?js,output

Answer 3

在您的代码中，您将名为capText的局部变量设置为jQuery对象。设置$caption元素的文本时，您将其设置为字符串表示为[object Object]的jQuery对象。

Answer 4

或者是另一个：

var capText = $(".target p").text();

演示：http://jsfiddle.net/qhpfmdta/

显示段落文本而不是[object Object]

4 个答案:

演示：http://jsfiddle.net/b31j9oj9/