将DOM中动态位置的文本临时存储在javascript变量中_Javascript_Jquery_Html_Variables

将DOM中动态位置的文本临时存储在javascript变量中

javascript jquery html variables

将DOM中动态位置的文本临时存储在javascript变量中,javascript,jquery,html,variables,Javascript,Jquery,Html,Variables,我正在为学校作业建立一个网站，所以有点简单。请原谅或更正任何不正确的术语我有多个相同的div，都共享同一个类，每个div都有两个段落元素，每个段落元素中都有一些文本通过单击触发，我希望为我单击的特定div分配一个id，以便在变量中引用，该变量应该存储子段落中的一些文本。我试图显示一个div，并从变量中提取文本这是我编写的Javascript： $(document).ready(function(){ //Hide the overlay. $('#overlay_alig

我正在为学校作业建立一个网站，所以有点简单。请原谅或更正任何不正确的术语

我有多个相同的div，都共享同一个类，每个div都有两个段落元素，每个段落元素中都有一些文本

通过单击触发，我希望为我单击的特定div分配一个id，以便在变量中引用，该变量应该存储子段落中的一些文本。我试图显示一个div，并从变量中提取文本

这是我编写的Javascript：

$(document).ready(function(){
    //Hide the overlay.
    $('#overlay_align').hide()

    //Fade in the overlay and change the title.
    $('.object').click(function(){
        //Sets the clicked item to have an id "active", for use in the variable "title".
        $(this).attr("id", "active")
        //Gets the text from this item's title section.
        var title = $('#active:nth-child(2)').text()
        //Sets the title printed in the overlay to whatever the title of the clicked item was.
        $('#overlay_title').html(title)
        console.log( title )
        $('#overlay_align').fadeIn("fast");
    })

    //Fade out the overlay.
    $('#close').click(function(){
        $('#overlay_align').fadeOut("fast")
        //remove the id for reuse when another item is clicked.
        $('#active').removeAttr("id");
    });
});

以及HTML文档的相关部分：

<head>
<link rel="stylesheet" type="text/css" href="Stylesheet.css"/>
<!--jQuery 1.4.2-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--Overlay on click-->
<script type="text/javascript" src="../Overlay.js"></script>
</head>

<body>

<div id="overlay_align">
    <div id="overlay">
        <div id="overlay_left">
        <img id="overlay_img" src=""/>
            <img id="loading" src="../Loading.gif" width="50" height="50" style="margin-top:50%"/>
        </div>
        <div id="overlay_right">
            <p id="overlay_title"></p>
            <img id="close" src="../Close%20Button.png" width="20" height="20"/>
            <p id="overlay_description"></p>
        </div>
        <div id="overlay_footer">
        </div>
    </div>
</div>

<div class="object">
    <div class="display"></div>
    <p class="title">Ttile</p>
    <p class="category">Category</p>
</div>
<div class="object">
    <div class="display"></div>
    <p class="title">Ttile</p>
    <p class="category">Category</p>
</div>
<div class="object">
    <div class="display"></div>
    <p class="title">Ttile</p>
    <p class="category">Category</p>
</div>




Ttile
类别
Ttile
类别
Ttile
类别

我的问题是，目前，变量存储两个段落的内容，而不仅仅是第二个段落（因此它显示为“Title Category”，甚至它只适用于第一个div。我不确定这种方式，所以我也愿意接受任何其他方式

声誉使我无法发布个人链接，因此这里有一张imgur相册，展示了它出现在的不同州：

PS：有没有办法不必手动将每行缩进四个空格？

您看到的元素是错误的。选择器

\active:n子元素（2）

没有在元素中查找第二个子元素

id=“active”

，它将查找id为第二个子元素的元素。您可以使用

#active p:nth child（2）

查找元素中的段落

但是，在向元素添加id时，您会遇到问题。第二次单击某个元素时，您将在两个元素上拥有该id，因此您将从该元素中获得文本，并从上一个元素中获得文本。此外，由于id在页面中应是唯一的，因此在某些浏览器中甚至可能会出现一些意外行为

您不需要在元素上设置id来查找它，您已经在

this

中有了一个可以使用的对它的引用。指定

this

作为上下文，并使用选择器

p:n子项（2）

：

演示：

我不确定我是否正确回答了问题。根据我的理解，您面临的问题是

var title=$（“#活动：第n个子项（2）”）.text（）

您可以在相应的div中找到类标题，而不是查找倒数第二个孩子

var title = $('#active').find('.title'); //Assuming that you have only one title in a single div

你需要使用

$('#active:nth-child(2)').children().last().text()

而不是

$('#active:nth-child(2)').text()

有一个用于缩进代码的按钮，看起来像

{}

。它提供类别而不是标题，并且仅当父元素恰好是其父元素的第二个子元素时才起作用。

$('#active:nth-child(2)').text()