简体   繁体   English

Select ID & Class 名称由 jquery 在多个类中

[英]Select ID & Class Name by jquery Within Multiple Classes

How to get id (mymodal, mybtn) and to get Class (close) in span Element in JavaScript.如何在 JavaScript 的 span 元素中获取 id (mymodal, mybtn) 并获取 Class (close)。 i want to creat a Modal Pop Up Box in CSS & JS.我想在 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>

I hope this is what you are looking for我希望这就是你要找的

how to select a class or id using jquery如何 select 一个 class 或 id 使用 jquery

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

note: iam selectiing mybtn id which is unique in current html file, iam also selecting close class with mymodal id so that no other close class will be called(if any exist).注意:我正在选择在当前 html 文件中唯一的 mybtn id,我还选择了带有 mymodal id 的关闭 class,这样就不会调用其他关闭 class(如果存在)。 here iam opening a modal and closing it我在这里打开一个模态并关闭它

below code is with javascript下面的代码是 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';
})

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM