Fatal编程技术网
  • javascript/
  • Javascript 如何通过；这"；转化为函数

Javascript 如何通过；这"；转化为函数

javascript

Javascript 如何通过；这"；转化为函数,javascript,Javascript,我正在用香草JavaScript做一些简单的事情，但这让我很困惑 以下是我的HTML和JavaScript代码： <div id="slide" class="slide-modal"> <div class="status-div"> <div>10:25 Optimization requested</div>

我正在用香草JavaScript做一些简单的事情，但这让我很困惑

以下是我的HTML和JavaScript代码：

<div id="slide" class="slide-modal">
    
        <div class="status-div">
            <div>10:25 Optimization requested</div>
            <div onclick="this.parentNode.style.display='none'"><img src="assets/images/cross.svg" /></div>
        </div>

        <div class="status-div">
            <div>10:26 Optimization successfully completed</div>
            <div onclick="this.parentNode.style.display='none'"><img src="assets/images/cross.svg" /></div>
        </div>

        <div class="status-div">
            <div>10:30 Booking requested</div>
            <div onclick="this.parentNode.style.display='none'"><img src="assets/images/cross.svg" /></div>
        </div>

        <div class="status-div">
            <div>10:45 Booking requested</div>
            <div onclick="this.parentNode.style.display='none'"><img src="assets/images/cross.svg" /></div>
        </div>

        <div class="status-div">
            <div>11:00 Booking requested</div>
            <div onclick="this.parentNode.style.display='none'"><img src="assets/images/cross.svg" /></div>
        </div>

        <div class="status-div">
            <div>11:30 Booking requested</div>
            <div onclick="this.parentNode.style.display='none'"><img src="assets/images/cross.svg" /></div>
    </div>

<script>

function closeStatus() {
            this.parentNode.style.display='none';
            const allNotifications = document.querySelectorAll(".status-div");
            if(allNotifications.length == 0 ) {
                document.getElementById('slide').style.visibility='hidden'; 
            }
        }
</script>


10:25请求优化
10:26优化成功完成
10:30要求预订
10:45要求预订
11:00要求预订
11:30要求预订
函数关闭状态（）{
this.parentNode.style.display='none'；
const allNotifications=document.querySelectorAll（“.status div”）；
if（allNotifications.length==0）{
document.getElementById（'slide'）.style.visibility='hidden'；
}
}
我想做的是使用closeStatus（）函数在onclick上运行

 <div onclick="this.parentNode.style.display='none'"><img src="assets/images/cross.svg" /></div>
关闭父级“状态div”。但我如何通过“这个”

因此，这将是：

 <div onclick="closeStatus"><img src="assets/images/cross.svg" /></div>
谢谢

根据您分配事件侦听器（onclick）的方式，您可能需要传递此
这是调用事件侦听器的DOM元素

事件处理程序的第一个参数是实际事件本身，它将引用生成事件的DOM元素

如果要传递DOM元素，可以这样做

更新
closeStatus
方法以期望元素：


function closeStatus(elm) {
            elm.parentNode.style.display='none';
            const allNotifications = document.querySelectorAll(".status-div");
            if(allNotifications.length == 0 ) {
                document.getElementById('slide').style.visibility='hidden'; 
            }
        }



根据您分配事件侦听器（onclick）的方式，您可能需要传递此消息
这是调用事件侦听器的DOM元素

事件处理程序的第一个参数是实际事件本身，它将引用生成事件的DOM元素

如果要传递DOM元素，可以这样做

更新
closeStatus
方法以期望元素：


function closeStatus(elm) {
            elm.parentNode.style.display='none';
            const allNotifications = document.querySelectorAll(".status-div");
            if(allNotifications.length == 0 ) {
                document.getElementById('slide').style.visibility='hidden'; 
            }
        }


您可以传递事件，而不必尝试使用：


function closeStatus(e) {
    e.target.parentNode.style.display='none';
    const allNotifications = document.querySelectorAll(".status-div");
    if(allNotifications.length == 0 ) {
        document.getElementById('slide').style.visibility='hidden'; 
    }
}


现在确保在onclick中传递带有关键字event的事件：



如您所见，事件（在函数中称为e）有一个名为target的属性，它是您的div。
您可以传递事件，而不必尝试使用此属性：


function closeStatus(e) {
    e.target.parentNode.style.display='none';
    const allNotifications = document.querySelectorAll(".status-div");
    if(allNotifications.length == 0 ) {
        document.getElementById('slide').style.visibility='hidden'; 
    }
}


现在确保在onclick中传递带有关键字event的事件：




如您所见，事件（在函数中称为e）有一个名为target的属性，它是您的div。
我刚刚重新排列了您的代码。我认为它可以工作，并且可以清理HTML


<div id="slide" class="slide-modal">

    <div class="status-div">
        <div>10:25 Optimization requested for +GE-2103 2106</div>
        <img src="assets/images/cross.svg" class="close" />
    </div>

    <div class="status-div">
        <div>10:26 Optimization for +GE-2103 2106 successfully completed</div>
         <img src="assets/images/cross.svg" class="close" />
    </div>

    <div class="status-div">
        <div>10:30 Booking requested for +GE-2103 2106 requested</div>
         <img src="assets/images/cross.svg" class="close" />
    </div>

    <div class="status-div">
        <div>10:45 Booking requested for +GE-2103 2106 requested</div>
         <img src="assets/images/cross.svg" class="close" />
    </div>

    <div class="status-div">
        <div>11:00 Booking requested for +GE-2103 2106 requested</div>
        <img src="assets/images/cross.svg" class="close" />
    </div>

    <div class="status-div">
        <div>11:30 Booking requested for +GE-2103 2106 requested</div>
        <img src="assets/images/cross.svg" class="close" />
</div>

<script>

    var close_btns = document.querySelectorAll('img.close');

    close_btns.forEach(close_btn => {
        close_btn.addEventListener("click", function closeStatus(event) {
           
            event.target.parentNode.style.display='none';
            
            const allNotifications = document.querySelectorAll(".status-div");
          
            if(allNotifications.length == 0 ) {
               document.getElementById('slide').style.visibility='hidden'; 
            }
        });
    });
    
</script>




10:25要求对+GE-2103 2106进行优化
10:26成功完成+GE-2103 2106的优化
10:30请求预订+GE-2103 2106请求
10:45要求预订+GE-2103 2106
11:00请求预订+GE-2103 2106请求
11:30要求预订+GE-2103 2106
var close_btns=document.querySelectorAll（'img.close'）；
关闭\u btn.forEach（关闭\u btn=>{
关闭\u btn.addEventListener（“单击”，函数关闭状态（事件）{
event.target.parentNode.style.display='none'；
const allNotifications=document.querySelectorAll（“.status div”）；
if（allNotifications.length==0）{
document.getElementById（'slide'）.style.visibility='hidden'；
}
});
});

我刚刚重新排列了您的代码。我认为它可以工作，并且可以清理HTML


<div id="slide" class="slide-modal">

    <div class="status-div">
        <div>10:25 Optimization requested for +GE-2103 2106</div>
        <img src="assets/images/cross.svg" class="close" />
    </div>

    <div class="status-div">
        <div>10:26 Optimization for +GE-2103 2106 successfully completed</div>
         <img src="assets/images/cross.svg" class="close" />
    </div>

    <div class="status-div">
        <div>10:30 Booking requested for +GE-2103 2106 requested</div>
         <img src="assets/images/cross.svg" class="close" />
    </div>

    <div class="status-div">
        <div>10:45 Booking requested for +GE-2103 2106 requested</div>
         <img src="assets/images/cross.svg" class="close" />
    </div>

    <div class="status-div">
        <div>11:00 Booking requested for +GE-2103 2106 requested</div>
        <img src="assets/images/cross.svg" class="close" />
    </div>

    <div class="status-div">
        <div>11:30 Booking requested for +GE-2103 2106 requested</div>
        <img src="assets/images/cross.svg" class="close" />
</div>

<script>

    var close_btns = document.querySelectorAll('img.close');

    close_btns.forEach(close_btn => {
        close_btn.addEventListener("click", function closeStatus(event) {
           
            event.target.parentNode.style.display='none';
            
            const allNotifications = document.querySelectorAll(".status-div");
          
            if(allNotifications.length == 0 ) {
               document.getElementById('slide').style.visibility='hidden'; 
            }
        });
    });
    
</script>




10:25要求对+GE-2103 2106进行优化
10:26成功完成+GE-2103 2106的优化
10:30请求预订+GE-2103 2106请求
10:45要求预订+GE-2103 2106
11:00请求预订+GE-2103 2106请求
11:30要求预订+GE-2103 2106
var close_btns=document.querySelectorAll（'img.close'）；
关闭\u btn.forEach（关闭\u btn=>{
关闭\u btn.addEventListener（“单击”，函数关闭状态（事件）{
event.target.parentNode.style.display='none'；
const allNotifications=document.querySelectorAll（“.status div”）；
if（allNotifications.length==0）{
document.getElementById（'slide'）.style.visibility='hidden'；
}
});
});

您可能在寻找什么？或者，您可以在事件处理程序中使用而不是
此
？或者，您可以在事件处理程序中使用而不是
this
？如果我使用“closeStatus（this）”则不起作用。请更新您的closeStatus以使用传入的元素，而不是
this
非常感谢！成功了。我已经好多年没有做过这样的事了！你能给我举个例子说明如何在函数中识别“this”吗？如果我使用“closeStatus（this）”则不起作用。请更新您的closeStatus以使用传入的元素，而不是
this
非常感谢！成功了。我已经好多年没有做过这样的事了！