在多个类中通过 jquery 选择 ID 和类名答案

【问题标题】：Select ID & Class Name by jquery Within Multiple Classes在多个类中通过 jquery 选择 ID 和类名
【发布时间】：2020-10-31 14:11:27
【问题描述】：

How to get id (mymodal , mybtn) and to get Class (close) in span Element in JavaScript. i want to creat a Modal Pop Up Box in CSS & JS. pleas find the atached link that explain the code

div class="header" id="hd">
        <div class="overlay">
            <ul class="bxslider">
                <li>
                    <h2>welcome to <span>plus resturent</span></h2>
                    <h3>the best tasting experience</h3>
                    <p>Olive is a Resturant,coffee roastery located on Jordan. 
                     we have awesome recips and the most talented chefs in town!</p>
                    <button class="btn" id="mybtn">creat account</button>
                    <div id="mymodal" class="modal">
                        <div class="modal-content">
                            <div class="modal-header">
                                <span class="close" id="spn">&times;</span>
                                <h2>modal header</h2>
                            </div>
                            <div class="modal-body">
                                <p>kkcmsakfm.sdf</p>
                            </div>
                            <div class="modal-footer">
                                <h3>dgdsg</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h2>we sereve quality food</h2>
                    <h3></h3>
                </li>
                <li>
                    <h2>welcome to <span>plus resturent</span></h2>
                    <h3>welcome to slider three</h3>
                </li>
            </ul>
        </div>
    </div>

【问题讨论】：

您想从 span 中获取 span 和 mymodal、mybtn id 的类吗？

标签： javascript html jquery css bootstrap-4

【解决方案1】：

我希望这就是你要找的东西

如何使用 jquery 选择类或 id

$(document).ready(function() {
  $('#mybtn').click(function() {
   $('#mymodal').show(); 
  })
  $('#mymodal .close').click(() => {
    $('#mymodal').hide();
  })
})

注意：我选择了在当前 html 文件中唯一的 mybtn id，我还选择了带有 mymodal id 的关闭类，这样就不会调用其他关闭类（如果存在的话）。我在这里打开一个模态并关闭它

以下代码使用 javascript

const mymodal = document.getElementById('mymodal');
const close = document.querySelector('#mymodal .close');
const mybtn = document.getElementById('mybtn');

mybtn.addEventListener('click', () => {
  mymodal.style.display = 'inline';
})

close.addEventListener('click', () => {
  mymodal.style.display = 'none';
})

【讨论】：