按钮需要点击 2 次才能换出 div [英] Button requires 2 clicks to swap out div

查看：21
本文介绍了按钮需要点击 2 次才能换出 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当单击按钮时，我有一个简单的 div 交换.但是，当页面第一次加载时，它需要用户在按钮上单击两次才能使该功能起作用.之后一切正常.请问有什么建议吗?

我的代码:

<风格>#swapper-其他{宽度:200px；高度:50px；背景颜色:深红色；颜色:#fff;显示:无；}#交换器优先{宽度:200px；高度:50px；背景颜色:黄绿色；颜色:#444；}</风格><div id="swapper-first"><p><a href="javascript:SwapDivsWithClick('swap-first','swapper-other')">(Swap Divs)</a></p><p style="margin:0; color:red;">这个 div 在网页第一次加载时显示.</p>

<div id="swapper-other"><a href="javascript:SwapDivsWithClick('swap-first','swapper-other')">(Swap Divs)</a><p>单击链接时会显示此 div.</p>

解决方案

为了在途中检测样式，您应该改用 getComputedStyle 方法.

下面是示例代码的更新版本:

<头><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title><风格>#swapper-其他{宽度:200px；高度:50px；背景颜色:深红色；颜色:#fff;显示:无；}#交换器优先{宽度:200px；高度:50px；背景颜色:黄绿色；颜色:#444；}</风格><script type="text/javascript">函数 SwapDivsWithClick(div1, div2, e) {让 d1 = document.getElementById(div1);让 d2 = document.getElementById(div2);让计算样式D1 = window.getComputedStyle(d1, null);让计算样式D2 = window.getComputedStyle(d2, null);if (computedStyleD2.display == "none") {d1.style.display = "无";d2.style.display = "块";} 别的 {d1.style.display = "块";d2.style.display = "无";}e.stopPropagation();}<身体><div id="swapper-first"><p><a href='#' onclick="SwapDivsWithClick('swap-first','swapper-other', event)">(Swap Divs)</a></p><p style="margin:0; color:red;">这个 div 在网页第一次加载时显示.</p>

<div id="swapper-other"><a href='#' onclick="SwapDivsWithClick('swap-first','swapper-other', event)">(Swap Divs)</a><p>单击链接时会显示此 div.</p>

</html>

I have a simple div swap out when the buttons are clicked. However, when the page first loads, it requires the user to click twice on the button for the function to work. After that everything works well. Any advice please?

My code:

<script type="text/javascript">
    function SwapDivsWithClick(div1, div2) {
        d1 = document.getElementById(div1);
        d2 = document.getElementById(div2);
        if (d2.style.display == "none") {
            d1.style.display = "none";
            d2.style.display = "block";
        } else {
            d1.style.display = "block";
            d2.style.display = "none";
        }
    }

</script>




<style>
    #swapper-other {
        width: 200px;
        height: 50px;
        background-color: darkred;
        color: #fff;
        display: none;
    }

    #swapper-first {
        width: 200px;
        height: 50px;
        background-color: yellowgreen;
        color: #444;
    }

</style>

 <div id="swapper-first">
    <p>
        <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
    </p>


    <p style="margin:0; color:red;">
        This div displayed when the web page first loaded.
    </p>
</div>
<div id="swapper-other">
    <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
    <p>
        This div displayed when the link was clicked.
    </p>
</div>

解决方案

In order to detect styles on the way, you should use getComputedStyle method instead.

Below updated version of code with your example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    #swapper-other {
        width: 200px;
        height: 50px;
        background-color: darkred;
        color: #fff;
        display: none;
    }

    #swapper-first {
        width: 200px;
        height: 50px;
        background-color: yellowgreen;
        color: #444;
    }

</style>
  <script type="text/javascript">
    function SwapDivsWithClick(div1, div2, e) {

        let d1 = document.getElementById(div1);
        let d2 = document.getElementById(div2);
        let computedStyleD1 = window.getComputedStyle(d1, null);
        let computedStyleD2 = window.getComputedStyle(d2, null);    
        if (computedStyleD2.display == "none") {             
            d1.style.display = "none";
            d2.style.display = "block";
        } else {
            d1.style.display = "block";
            d2.style.display = "none";
        }

      e.stopPropagation();         
    }

</script>
</head>
<body>
 <div id="swapper-first">
    <p>
        <a href='#' onclick="SwapDivsWithClick('swapper-first','swapper-other', event)">(Swap Divs)</a>
    </p>


    <p style="margin:0; color:red;">
        This div displayed when the web page first loaded.
    </p>
</div>
<div id="swapper-other">
    <a href='#' onclick="SwapDivsWithClick('swapper-first','swapper-other', event)">(Swap Divs)</a>
    <p>
        This div displayed when the link was clicked.
    </p>
</div>
</body>
</html>

这篇关于按钮需要点击 2 次才能换出 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆