Question

有人可以告诉我如何在元素ID中找到类元素吗？

1：我想在ID close中找到类名'message_sent'，以便在我单击特定的关闭图标时关闭ID元素块。

2：我想在ID close中找到类名'mailing_list_email_sent'，以便在我单击特定的关闭图标时关闭该ID元素块。

下面是html和js代码：

// Get the modal
var modal = document.getElementById("message_sent");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// Get the modal
var modalMailingMsg = document.getElementById("mailing_list_email_sent");

// Get the <span> element that closes the modal
var spanCloseMailingMsg = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
spanCloseMailingMsg.onclick = function() {
  modalMailingMsg.style.display = "none";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="message_sent">
  <p>
    Message successfully sent!
    <span class="close">&times;</span>
  </p>
</section>';

<section id="mailing_list_email_sent">
  <p>
    Message successfully sent!
    <span class="close">&times;</span>
  </p>
</section>';

Answer 1

代替使用 id ，您可能可以使用 tag 名称：

演示：

// Get the <span> element that closes the modal
var spanList = document.querySelectorAll(".close");
spanList.forEach(function(span){
  // When the user clicks on <span> (x), close the modal
  span.addEventListener('click',function() {
    this.closest("section").style.display = "none";
  });
});

<section id="message_sent">
  <p>
    Message 1 successfully sent!
    <span class="close">&times;</span>
  </p>
</section>

<section id="mailing_list_email_sent">
  <p>
    Message 2 successfully sent!
    <span class="close">&times;</span>
  </p>
</section>

Answer 2

message_sent>关闭

$('#message_sent .close')

mailing_list_email_sent>关闭

$('#mailing_list_email_sent .close')

您也可以使用香草js：

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

Answer 3

使用最少的代码即可使用jQuery（和少量ES2015语法糖）：

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

$(document).on('click', '.close', (e) => $(e.target).closest('section').hide());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="message_sent">
  <p>
    Message successfully sent!
    <span class="close">&times;</span>
  </p>
</section>';

<section id="mailing_list_email_sent">
  <p>
    Message successfully sent!
    <span class="close">&times;</span>
  </p>
</section>';

没有jQuery，它几乎是相同的，只是有些冗长。与事件委托相同；只是在这里，我需要检查当前目标是否具有“ close”类，然后添加了一个将其隐藏的CSS类。我使用了这样的CSS类，以防日后要添加CSS过渡。

document.body.addEventListener('click', (e) => 
  e.target.classList.contains('close') && 
  e.target.closest('section').classList.add('hide'));

.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="message_sent">
  <p>
    Message successfully sent!
    <span class="close">&times;</span>
  </p>
</section>';

<section id="mailing_list_email_sent">
  <p>
    Message successfully sent!
    <span class="close">&times;</span>
  </p>
</section>';

Answer 4

我的纯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';
});

jQuery-如何与元素ID中的类元素进行交互

4 个答案: