Question

我怎么把这些，让我试试。在以下几组代码中，我想点击'parentclass'并提供一个警告值'child1'，当我点击它下面的类'Parent 2'时会有一个值为'child2'的警报火

因此，这必须仅警告该类的内容，而不是整个类。

这是Jquery中的一些Javascript。

var childclass = $('.childclass').html();
$('.parentclass').click(function(e) {
    alert (childclass)
});
$('.childclass').click(function(e) {
    e.stopPropagation()
    e.preventDefault()
});

和HTML

<a href="" onClick="return false">
    <div class='parentclass'>
       Parent 1
    <div style="display:none" class="childclass">child1</div>
  </div>
</a>
<a href="" onClick="return false">
    <div class='parentclass'>
      Parent 2
    <div style="display:none" class="childclass">child2</div>
 </div>
</a>

Answer 1

这一行var childclass = $('.childclass').html();没有意义，因为它不知道你的意思是哪个元素。结果只是child1child2，它只是所有元素.html()与类childclass的串联。这显然不是你想要的。

因此，您应该在收到点击事件后动态查找类childclass的孩子。

$('.parentclass').click(function(e) {
    alert($(this).find('.childclass').html())
});

此外，您应该知道您的子类事件处理程序是无用的，因为我们不关心事件是否向下传播。如果你关心DID，那么你的e.stopPropagation()和e.preventDefault()应该在父类的事件处理程序中。

Answer 2

您需要在点击处理程序

中获取所点击的父元素的html

$('.parentclass').click(function (e) {
    alert($(this).find('.childclass').html())
});
$('.childclass').click(function (e) {
    e.stopPropagation()
    e.preventDefault()
});

演示：Fiddle

Answer 3

你可以通过几种方式解决这个问题。

首先，如果您的HTML不是动态的（页面加载时元素已经存在），那么您可以按父类名称选择元素并指定click事件：

$('.parentclass').click(function(e) {
    //  the first variable here is selecting the inner elements having class 'childclass'
    //  keep in mind, if more than one child having that class is present within this parent, it will select all of them
    var child = $(this).find('.childclass');
    //  here we alert the text of the inner child found
    //      if it is more than one, you will have undesired results. you may want to specify `.first()`
    alert(child.text())
})

对于较新的jQuery，您还可以使用$('.parentclass').on('click', function(e) {。

如果您希望parentclass的任何部分都是动态的，那么您希望根据父母的静态父级或document委托事件。这可能是这样的：

$(document).on('click', '.parentclass', function(e) {
    alert($(this).find('.childclass').text())
})

或者，如果你有一个静态的（在页面加载时已经存在）包装元素，给它一个像`parentClassWrapper＆＃39;并将click事件动态分配为：

$('#parentClassWrapper').on('click', '.parentclass', function(e) {
    alert($(this).find('.childclass').text())
})

一些有用的链接：

Answer 4

我对你的html做了一些值得注意的调整。不需要<a>标记。不要在你的html中使用内联js - onlick。请注意，我将文本包装在<a>标记中的div内。这个标记更具语义性。另外，将样式移动到css而不是html。

  <div class="parent">
    <a>Parent 1</a>
    <a class="child">child of parent 1 contents</a>
  </div>
  <div class="parent">
    <a>Parent 2</a>
    <a class="child">child of parent 2 contents</a>
 </div>

的CSS：

.parent > .child { /* good practice: only select an immediate child of the parent */
  display: none;
}

此处的其他答案是使用find()来选择孩子，但我建议使用children()。例如，如果您有其他嵌套.child，find()将全部选中它们，但children()只会选择父级的直接.child，所以它更好这个案例。我还建议使用控制台进行调试而不是alert。

Live demo here (click).

$('.parent').click(function() {
  var $child = $(this).children('.child');
  var cls = $child.attr('class');
  console.log(cls);
  $child.show(); //added so that you can click the child
});

$('.child').click(function() {
  var html = $(this).html();
  console.log(html);
  //if you just want the text, use this instead:
  var text = $(this).text();
  console.log(text);
});

单击Div类时，请提示其内部内容的Div类

4 个答案: