jQuery 和单击元素中的第一个元素

jQuery and first element in the clicked element

本文关键字：元素 第一个 jQuery 单击      更新时间：2023-09-26

我有 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可以做到这一点吗？

假设你有这样的 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(); 
});

在事件处理程序中，this将引用处理程序附加到的元素

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

演示：小提琴

使用这个

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

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

您的代码将作为

使用jQuery('#'+clickedID)而不是jQuery(clickedID)

相关文章：