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

【问题标题】：Display paragraph text instead of [object Object]显示段落文本而不是 [object Object]
【发布时间】：2014-12-05 20:11:11
【问题描述】：

我正在制作一个叠加层以在单击图像时弹出。覆盖应该有一张图片和一个段落。它出现，显示图片，但不显示在实际页面中隐藏的段落，CSS "display: none;"功能并在叠加层出现后再次使用 jQuery 显示。相反，它显示“[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();

});

【问题讨论】：

您是否正在使用来自 json 对象的 javascript 设置段落文本？可能您正在分配对象而不是文本或数字属性。

标签： javascript jquery css show hidden

【解决方案1】：

在 $(this).children(":hidden") 的情况下，您在标签中搜索，但

位于父标签

试试这个

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

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

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

【讨论】：

【解决方案2】：

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

你可以像这样修复你的代码：

var capText = $(this).parent().children(":hidden").text();

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

或者这是另一个：

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

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

【讨论】：