我想在再次單擊圖標時將圖標旋轉到舊狀態

我想在不丟失當前功能的情況下再次單擊圖標時將圖標旋轉到舊狀態。當前功能：我想在再次單擊圖標時將圖標旋轉到舊狀態

圖標將首先點擊相應的圖標旋轉180度。
圖標會在點擊其他圖標或外部時再次旋轉。

有了這個功能我想添加一個新功能，也就是說，當我們再次點擊圖標時需要旋轉圖標。

function rotate(e){ 
 
    resetRotation(); 
 
    document.getElementById("me").className="spinner in fa fa-caret-down"; 
 
    e.stopPropagation(); 
 
} 
 

 
function resetRotation(){ 
 
    document.getElementById("me").className="spinner out fa fa-caret-down"; 
 
    document.getElementById("you").className="spinner out fa fa-caret-down"; 
 
} 
 

 
function rotatea(e){ 
 
    resetRotation(); 
 
    document.getElementById("you").className="spinner in fa fa-caret-down"; 
 
    e.stopPropagation(); 
 
} 
 

 
document.addEventListener('click', resetRotation);

.spinner { 
 
    transition: all 0.5s linear; 
 
} 
 

 
.spinner.in{ 
 
    transform: rotate(180deg); 
 
} 
 
.spinner.out{ 
 
    transform: rotate(0deg); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<i onclick="rotate(event)" id="me" class="spinner fa fa-caret-down "></i> 
 
<i onclick="rotatea(event)" id="you" class="spinner fa fa-caret-down"></i>

來源

2016-08-24 Dream Hunter

您應該再次更改類，你旋轉後，然後如果你點擊它再次使用新的類旋轉它回 – Bisquitue

是的...它可能工作 –

但是..我會給新的任務..，我很困惑它 –

做檢查您已經添加了在類的我標記轉回並退出功能。要檢查元素已經有了一個類中使用下面的代碼，

document.querySelector("#you").classList.contains("in")

function rotate(e) { 
 
    // Check is already rotated and return 
 
    if (document.querySelector("#me").classList.contains("in")) { 
 
    resetRotation(); 
 
    return; 
 
    } 
 
    resetRotation(); 
 
    document.getElementById("me").className = "spinner in fa fa-caret-down"; 
 
    e.stopPropagation(); 
 
} 
 

 
function resetRotation() { 
 
    document.getElementById("me").className = "spinner out fa fa-caret-down"; 
 
    document.getElementById("you").className = "spinner out fa fa-caret-down"; 
 
} 
 

 
function rotatea(e) { 
 
    // Check is already rotated and return 
 
    if (document.querySelector("#you").classList.contains("in")) { 
 
    resetRotation(); 
 
    return; 
 
    } 
 
    resetRotation(); 
 
    document.getElementById("you").className = "spinner in fa fa-caret-down"; 
 
    e.stopPropagation(); 
 
} 
 

 
document.addEventListener('click', resetRotation);

.spinner { 
 
    transition: all 0.5s linear; 
 
} 
 
.spinner.in { 
 
    transform: rotate(180deg); 
 
} 
 
.spinner.out { 
 
    transform: rotate(0deg); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<div style="padding:20px;"> 
 
    <i onclick="rotate(event)" id="me" class="spinner fa fa-caret-down "></i> 
 
    <i onclick="rotatea(event)" id="you" class="spinner fa fa-caret-down"></i> 
 
</div>

來源

2016-08-25 13:28:12

var isChanged=true 
    function rotate(e){ 

     document.getElementById("me").className="spinner fa fa-caret-down"+ (isChanged?"in":"out"); 

     isChanged=!isChanged; 

     e.stopPropagation(); 
    }

同樣可以爲rotatea

來源

2016-08-25 11:56:05

我想在再次單擊圖標時將圖標旋轉到舊狀態

回答

相關問題