Question

我有2个 div 元素，如果我点击第一个div，那么应该显示点击div内的另一个div，但我无法理解它的工作原理，我的jquery代码是这样的：

jQuery('.infobutton').click(function(){
    var clickedID = jQuery(this).attr('id');
    jQuery(clickedID).children('div').toggle(); 
});

<div class="infobutton" id="infobtn1">
    <div class="content">some content</div>
</div>

我每次都得到正确的ID，我也尝试使用.first()，.parent()，.children('.content')

使用jQuery可以做到这一点吗？

Answer 1

让我们假设你有这样的HTML：

<div id="container" class="infobutton">
    Some content
    <div>Some other content</div>
</div>

现在让我们来看看你的Javascript：

jQuery('.infobutton').click(function(){

使用类infobutton查找元素并分配click处理程序。这很好。

var clickedID = jQuery(this).attr('id');

将该元素的id放在变量clickedID中。 clickedID的值现为container。

jQuery(clickedID).children('div').toggle();

在clickedID上运行jQuery选择器。 我们遇到了问题。这可以归结为jQuery('container')。这会查找标记名为container的元素，而不是ID container。

事实上，所有这一切的解决方案都不是使用ID。相反，您可以使用this构建jQuery对象，该对象是对单击元素的引用：

jQuery('.infobutton').click(function(){
    jQuery(this).children('div').toggle(); 
});

Answer 2

事件处理程序this内部将引用处理程序附加到的元素

jQuery('.infobutton').click(function(){
    jQuery(this).children('.content').toggle(); 
});

演示：Fiddle

Answer 3

使用this

jQuery('.infobutton').click(function(){
    jQuery(this).children('.content').toggle(); 
});

this指的是事件中的当前元素。

您的代码将作为

使用jQuery('#'+clickedID)代替jQuery(clickedID)

jQuery和被点击元素中的第一个元素

3 个答案: