Question

我在其中有一个名为divs的网页上有多个parent_container我有一个heading，image和一个button

如何获取点击它的容器的特定heading的值？

<div class="parent_container">
   <img class="news_image" src="/" />
    <h1 class="product_title">title 1</h1>
    <a class="cta-btn" href="#">button1</a>
</div>

<div class="parent_container">
    <img class="news_image" src="/" />
     <h1 class="news_title">title 2</h1>
     <a class="cta-btn" href="#">button2</a>
</div>

//getting the elements
var update_buttons = document.getElementsByClassName( 'cta-btn' ),
    parentElement  = document.getElementsByClassName( 'parent_container' ),
    itemTitle      = document.getElementsByClassName( 'news_title' );

//trying to get the title from the div it was clicked in
var getTitle = function( evt ) {
    var title = this.itemTitle;

    console.log( title ); //undefined
}

//setting up a event listener on all the buttons on the page 
for( var i=0;i<update_buttons.length;i++ ){
    update_buttons[i].addEventListener('click', getTitle);
}

Answer 1

使用evt.toElement获取点击的元素（在这种情况下，this也有效。）

从那里获取父节点，然后选择子h1元素。

使用textContent访问文字：

var getTitle = function (evt) {
    var el = evt.toElement, // or this
        parent = el.parentNode,
        header = parent.querySelector('h1[class*="title"]'),
        headerText = header.textContent;

    console.log(headerText);
}

Example Here

..如果您不想缓存变量：

evt.toElement.parentNode.querySelector('h1[class*="title"]').textContent;

＆＃13;

//getting the elements
var update_buttons = document.getElementsByClassName('cta-btn'),
    parentElement = document.getElementsByClassName('parent_container'),
    itemTitle = document.getElementsByClassName('news_title');

//trying to get the title from the div it was clicked in
var getTitle = function (evt) {
    var el = evt.toElement,
        parent = el.parentNode,
        header = parent.querySelector('h1[class*="title"]'),
        headerText = header.textContent;
    
    console.log(headerText);
}

//setting up a event listener on all the buttons on the page 
for (var i = 0; i < update_buttons.length; i++) {
    update_buttons[i].addEventListener('click', getTitle);
}

＆＃13;

<div class="parent_container">
   <img class="news_image" src="/" />
    <h1 class="product_title">title 1</h1>
    <a class="cta-btn" href="#">button1</a>
</div>

<div class="parent_container">
    <img class="news_image" src="/" />
     <h1 class="news_title">title 2</h1>
     <a class="cta-btn" href="#">button2</a>
</div>

＆＃13;

Answer 2

步骤最少的解决方案。它表明你的标题始终是按钮的前一个元素。

使用：

 var getTitle = function( evt ) {
     var title = this.previousElementSibling.textContent || this.previousElementSibling.innerText;

    console.log( title ); //undefined

  }

为了确保始终返回正确的元素，您需要的内容比上面的示例多一点。我为什么这么说如果您（或其他人）编辑html，上面的解决方案可能会中断。更好的解决方案是为title element提供类名称或更好的属性，该属性仅用于这些标题。看看这个解决方案：

 <div class="parent_container">
      <img class="news_image" src="/" />
      <h1 title-element class="news_title">title 2</h1>
      <a class="cta-btn" href="#">button2</a>
 </div>

 var getTitle = function( evt ) {
     var title = this.parentElement.querySelector("h1[title-element]");

    return title.textContent || title.innerText;

  }

上面的答案使得html在将来更新时功能中断的可能性降低。

PS。对于不支持textContent的旧浏览器（读取IE），|| element.innerText是后退。

Answer 3

首先你得到一个拼写错误：console.log(title)。这是你需要做的事情，得到父母，然后是孩子的标题：

var title = this.parentNode.children[1].innerHTML;
console.log( title );

<强> Example Here

注意这假设您对<div class="parent_container">项具有相同的结构，因此标题是第二项。

修改

如果结构已更改，您可以选择querySelector('h1')的项目：

var title = this.parentNode.querySelector('h1').innerHTML; console.log( title );

正如 @JoshCrozier 提议的那样，您可以使用.querySelector('h1[class*="title"]')，这意味着它会选择一个带有＆＃34; title＆＃34;在里面。因此product_title，news_title，something_title将起作用。这样你就可以在<h1>中添加其他<div>个元素，如果你碰巧想要添加它们（你只需要确保他们没有一个带有＆＃的单词的课程） 34;标题＆＃34;在那些）。

如何根据click事件获取子节点

3 个答案: