javascript - 我想在单击相应图标时正确旋转图标

Question

在此 html 代码中，我尝试在单击相应图标时将图标旋转 180 度，并在单击其他图标或外部时返回。 这里的问题是点击第二个图标时第一个图标不返回，第二个图标点击第一个图标或点击外部图标不返回。如何解决？

function rotate(e){
  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.addEventListener('click', resetRotation);
function rotatea(e){
  document.getElementById("you").className="spinner in fa fa-caret-down";
  e.stopPropagation();
}

.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>

Answer 1

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>