我想在再次单击图标时将图标旋转到旧状态

我想在不丢失当前功能的情况下再次单击图标时将图标旋转到旧状态。当前功能：我想在再次单击图标时将图标旋转到旧状态

图标将首先点击相应的图标旋转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

我想在再次单击图标时将图标旋转到旧状态

回答

相关问题