我怎么能得到div。没有内容(javascript)

时间:2016-11-21 18:54:09

标签: javascript target



var desc = document.querySelectorAll(".desc");

function change() {
    var how = desc.length;
    
    for(var i = 0; i < how; i++) {
        desc[i].getElementsByTagName("p")[1].style.display = "none";
    }
}

change();

function show(e) {
    var target = e.target;
    
    console.log(target);
}

for(var i = 0; i < desc.length; i++) {
    desc[i].onclick = show;
}
&#13;
.desc {
    width: 80%;
    margin: 0 auto;
    border: 3px solid #cccccc;
    padding: 5px;
    margin-bottom: 10px;
}
&#13;
<div class="desc">
                <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
            </div>
            
            <div class="desc">
                <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
            </div>
            
            <div class="desc">
                <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
            </div>
&#13;
&#13;
&#13;

我有问题:我得到了目标,但我不想要一个段落,但div需要类.desc。然后我想参考这个目标并选择孩子。我怎么能这样做?所以,当有人点击这个或这个div中的文本时,我想只使用类desc进入目标div。

1 个答案:

答案 0 :(得分:0)

即使您为<div>元素设置了onclick事件,实际上也会触发子<p>元素中的onclick事件,请参阅此答案https://stackoverflow.com/a/13966749/3029422

根据您的实施需求,您可以停止事件传播,也可以只获取父节点。

将您的target变量更改为var target = e.target.parentNode;,以便引用<div>元素:

&#13;
&#13;
var desc = document.querySelectorAll(".desc");

function change() {
  var how = desc.length;

  for (var i = 0; i < how; i++) {
    desc[i].getElementsByTagName("p")[1].style.display = "none";
  }
}

change();

function show(e) {
  var target = e.target.parentNode;

  console.log(target);
}

for (var i = 0; i < desc.length; i++) {
  desc[i].onclick = show;
}
&#13;
.desc {
  width: 80%;
  margin: 0 auto;
  border: 3px solid #cccccc;
  padding: 5px;
  margin-bottom: 10px;
}
&#13;
<div class="desc">
  <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
    viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
    nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>

<div class="desc">
  <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
    viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
    nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>

<div class="desc">
  <p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
    viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
    nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
&#13;
&#13;
&#13;