Как создать Javascript onclick l oop? - PullRequest
Новая
       11

Как создать Javascript onclick l oop?

0 голосов
/ 11 июля 2020

Я пытаюсь создать toogle, где, если стрелка находится на 0 градусов, она вращается, а если она на 90 градусов, она поворачивается обратно на 0 градусов. Однако на данный момент он вращается при первом щелчке, где стрелка установлена ​​на 90 градусов, но не при втором щелчке, чтобы повернуть его обратно. Почему? 

    function togglepage() {
        if (document.getElementById("toggle").style.transform = "rotate(0deg)") {
            document.getElementById("toggle").style.transform = "rotate(90deg)";
        }
        else if (document.getElementById("toggle").style.transform = "rotate(90deg)") {
            document.getElementById("toggle").style.transform = "rotate(-90deg)";
            document.getElementById("toggle").style.transform = "rotate(0deg)";
        }
    }

Ответы [ 3 ]

0 голосов
/ 11 июля 2020

Надеюсь, это поможет 

let toggle = document.getElementById("toggle");

function togglepage(toggle) {
    console.log(toggle);
    switch(toggle.style.transform){
        case "":
        case "rotate(180deg)":  
        case "rotate(0deg)":
            toggle.style.transform = "rotate(90deg)";
        break;
        case "rotate(90deg)":
            toggle.style.transform = "rotate(180deg)";
        break;
    }       
}
0 голосов
/ 11 июля 2020

Попробуйте этот код

https://codepen.io/dkreativetech/pen/yLeEKoY

HTML КОД 

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div class="dropdown">
    <button class="dropdown-toggle" type="button">
        DROPDOWN
        <div class="caret">❯</div>
    </button>
</div>

jQuery КОД 

$(".dropdown-toggle").on("click", function () {
    $(".caret").toggleClass("active");
})

CSS КОД 

.dropdown .dropdown-toggle {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    border: 1px solid transparent;
    padding: 6px 20px 6px 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-toggle .caret {
    margin-left: 10px
}

.dropdown-toggle .caret.active {
    transform: rotate(90deg);
}
0 голосов
/ 11 июля 2020

Ваши условия неверны, вам нужно использовать '==' как 

if (document.getElementById("toggle").style.transform == "rotate(0deg)")

Правильная функция такая - 

function togglepage() {
        if (document.getElementById("toggle").style.transform == "rotate(0deg)" || document.getElementById("toggle").style.transform == "") {
            document.getElementById("toggle").style.transform = "rotate(90deg)";
        }
        else if (document.getElementById("toggle").style.transform == "rotate(90deg)") {
            document.getElementById("toggle").style.transform = "";
        }
        
}
...