Javascript jquery-如何在元素的id内与类元素交互

有人能告诉我如何在元素id中找到类元素吗

1：我想在id

'message\u sent'

中找到类名

close

，这样，如果我单击特定的close图标，它就会关闭id元素块

2：我想在id

'mailing\u list\u email\u sent'

中找到类名

close

，这样，如果我单击特定的close图标，它就会关闭id元素块

下面是html和js代码：

//获取模式
var modal=document.getElementById（“消息已发送”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//获取模态
var modalMailingMsg=document.getElementById（“邮件列表”和“发送的电子邮件”）；
//获取关闭模态的元素
var spanCloseMailingMsg=document.getElementsByClassName（“close”）[0]；
//当用户单击（x）时，关闭模式对话框
spanCloseMailingMsg.onclick=函数（）{
modalMailingMsg.style.display=“无”；
}

消息成功发送！
&时代；

';

消息成功发送！
&时代；

';已发送消息>关闭

$('#message_sent .close')

$('#mailing_list_email_sent .close')

邮件列表电子邮件发送>关闭

$('#message_sent .close')

$('#mailing_list_email_sent .close')

您也可以使用vanilla js：

document.querySelector('#message_sent .close');

您可以使用标记名，而不是使用id：

演示：


//获取关闭模式的元素
var spanList=document.queryselectoral（“.close”）；
span list.forEach（函数（span）{
//当用户单击（x）时，关闭模式对话框
span.addEventListener（'click'，function（）{
此.style.display=“无”；
});
});


消息1成功发送！
&时代；


消息2成功发送！
&时代；

使用最少的代码就是使用jQuery（和一点ES2015 sytax sugar）：

注意，我在这里使用事件委派，以便在解析此代码后可以添加更多通知，而不必添加更多代码


$（document）.on（'click'，'.close'，（e）=>$（e.target）.closest（'section'）.hide（））


消息成功发送！
&时代；

';

消息成功发送！
&时代；

';我的纯js解决方案：

document.querySelector('section#message_sent span.close').addEventListener('click', (e) => {
    let closeBtn = e.target;
    let messageSentSection = closeBtn.closest('section');

    messageSentSection.style.display = 'none';
});

document.querySelector('section#mailing_list_email_sent span.close').addEventListener('click', (e) => {
    let closeBtn = e.target;
    let mailingListEmailSentSection = closeBtn.closest('section');

    mailingListEmailSentSection.style.display = 'none';
});

$（'#parentid.child class'）
相当直接。与创建css规则的方法相同。您已经标记了这个[jquery]，但明显没有在代码中使用jquery。如果您想继续不使用jQuery，只需使用id为的元素作为搜索范围，而不是
文档
，因此
modal.getElementsByClassName（“close”）[0]
，或者更简洁地说，
modal.querySelector（.close”）
。我尝试了您的建议，但当我单击关闭图标时，它们不会关闭相关的消息块此代码对文档顺序中类为“close”的元素的顺序进行了一些假设。如果用户剪切并粘贴id为“message_sent”的元素，然后粘贴id为“mailing_list_email_sent”的元素，则此代码将中断。或者，如果在这两个元素之间插入了另一个元素，且该类与此行为无关，那么这有一个小问题。在提供的示例中，这很好，因为我们有两个类元素，所以有0和1。但是在其他页面中，只发送了邮件列表，没有发送任何消息，这就是为什么我想先查找特定元素，然后查找包含inPerfect的close元素：）谢谢Mamun