切換開關需要兩次單擊才能滑動

我在嘗試創建切換按鈕時遇到了問題。它在單擊時移動，但僅在單擊兩次后才會移動。我知道我必須先設定它，然后它才會在第一次點擊時滑動，但我的困惑源于我這樣做的時候，它點擊到右邊并且無論我點擊多少次都不會向后移動。有誰知道我該如何解決這個問題？

`

    <div class="main">
        <div class="container">
            <div class="slider" id="slideHousing">
                <div class="slideBtn" id="slider" onclick="SlideRight()">

                </div>
            </div>
        </div>
    </div>

`

.main {
            display: table;
            height: 100%;
            width: 100%;
            border: 1px solid transparent;
        }

        .container {
            display: table-cell;
            vertical-align: middle;
            border: 1px solid transparent;
        }

        .slider {
            height: 100px;
            width: 200px;
            border-radius: 50px;
            background-color: #f2f2f2;
            margin: 0 auto;
            border: 1px solid transparent;
            
        }

        .slideBtn {
            border: 1px solid transparent;
            height: 95px;
            margin: 1px;
            width: 100px;
            border-radius: 50px;
            background-color: silver;
        }

`

function SlideRight() {
            // Checks to see if the slider is to the left of the div
            if (document.getElementById("slider").style.float === "left"){
                // If it is we will float the sliderBtn to the right and change the background of the housing to green
                document.getElementById("slider").style.float = "right";
                document.getElementById("slideHousing").style.backgroundColor = "#00ff00";

                // Toggle dark mode on
                document.body.style.backgroundColor = "#595959";
                document.getElementById("header").style.color = "#e6e6e6";
            } else {
                // If clicked again the btn will move back to the left side and change the color back to original
                document.getElementById("slider").style.float = "left";
                document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";

                // Toggle dark mode off
                document.body.style.backgroundColor = "#e6e6e6";
                document.getElementById("header").style.color = "#000";
            }
        }

uj5u.com熱心網友回復：

當您第一次檢查 時style.float === 'left'，該值實際上是未定義的，因為它尚未設定。相反，您可以簡單地檢查該值是否不等于 right style.float !== right。

function SlideRight() {

  // Checks to see if the slider is to the left of the div
  if (document.getElementById("slider").style.float !== "right") {
    // If it is we will float the sliderBtn to the right and change the background of the housing to green
    document.getElementById("slider").style.float = "right";
    document.getElementById("slideHousing").style.backgroundColor = "#00ff00";

    // Toggle dark mode on
    document.body.style.backgroundColor = "#595959";
    document.getElementById("header").style.color = "#e6e6e6";
  } else {
    // If clicked again the btn will move back to the left side and change the color back to original
    document.getElementById("slider").style.float = "left";
    document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";

    // Toggle dark mode off
    document.body.style.backgroundColor = "#e6e6e6";
    document.getElementById("header").style.color = "#000";
  }
}

.main {
  display: table;
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

.container {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid transparent;
}

.slider {
  height: 100px;
  width: 200px;
  border-radius: 50px;
  background-color: #f2f2f2;
  margin: 0 auto;
  border: 1px solid transparent;
}

.slideBtn {
  border: 1px solid transparent;
  height: 95px;
  margin: 1px;
  width: 100px;
  border-radius: 50px;
  background-color: silver;
}

<div id="header">

</div>

<div class="main">
  <div class="container">
    <div class="slider" id="slideHousing">
      <div class="slideBtn" id="slider" onclick="SlideRight()">

      </div>
    </div>
  </div>
</div>

這是一個好的開始，但可能有一些建議：

• 整個滑塊應該是可點擊的
• onclick 事件可能會被標記slideToggle或類似的東西
• 您可能可以添加一個可以為您做所有事情的 css 類

如：

function toggleSlider(ele) {
  ele.classList.toggle('active')
}

.main {
  display: table;
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

.container {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid transparent;
}

.slider {
  height: 100px;
  width: 200px;
  border-radius: 50px;
  background-color: #f2f2f2;
  margin: 0 auto;
  border: 1px solid transparent;
}

.slideBtn {
  border: 1px solid transparent;
  height: 95px;
  margin: 1px;
  width: 100px;
  border-radius: 50px;
  background-color: silver;
}

.slider.active .slideBtn {
  float: right;
}

.slider.active {
  background-color: #00ff00;
}

<div id="header">

</div>

<div class="main">
  <div class="container">
    <div class="slider" id="slideHousing" onclick="toggleSlider(this)">
      <div class="slideBtn" id="slider">

      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

所以我把這個添加到你的 CSS 中：

  #slider {
          float: left;
        }

所以它有一些需要初步閱讀的東西。

我也只是簡單地從你所有的 js 代碼中反轉了“左”和“右”（因為它現在最初是左），它似乎作業：

function SlideRight() {
            // Checks to see if the slider is to the left of the div
            if (document.getElementById("slider").style.float === "right"){
                // If it is we will float the sliderBtn to the right and change the background of the housing to green
                document.getElementById("slider").style.float = "left";
                document.getElementById("slideHousing").style.backgroundColor = "#00ff00";

                // Toggle dark mode on
                document.body.style.backgroundColor = "#595959";
                document.getElementById("header").style.color = "#e6e6e6";
            } else {
                // If clicked again the btn will move back to the left side and change the color back to original
                document.getElementById("slider").style.float = "right";
                document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";

                // Toggle dark mode off
                document.body.style.backgroundColor = "#e6e6e6";
                document.getElementById("header").style.color = "#000";
            }
        }

.main {
            display: table;
            height: 100%;
            width: 100%;
            border: 1px solid transparent;
        }

        .container {
            display: table-cell;
            vertical-align: middle;
            border: 1px solid transparent;
        }

        .slider {
            height: 100px;
            width: 200px;
            border-radius: 50px;
            background-color: #f2f2f2;
            margin: 0 auto;
            border: 1px solid transparent;
            
        }

        .slideBtn {
            border: 1px solid transparent;
            height: 95px;
            margin: 1px;
            width: 100px;
            border-radius: 50px;
            background-color: silver;
        }
        
        #slider {
          float: left;
        }

 <div class="main">
        <div class="container">
            <div class="slider" id="slideHousing">
                <div class="slideBtn" id="slider" onclick="SlideRight()">

                </div>
            </div>
        </div>
    </div>

標籤：javascripthtmlcss

上一篇：文本左側的影像

下一篇：ASP.NETRazorPages等效于頁面加載方法