使用“显示”单击显示一些图像。

Question

下面是我的jquery代码。这个眼睛类包含一些我希望在用户点击它时显示的眼睛图像，所以我使用了这种显示技术，但它不适合我。

eyesBorder.click(function(e){
  for(let i = 0; i<eyesBorder.length; i++){
    $(e.target).css({"display":"block"});
    break;
  }
})

为我工作的技术如下，但它需要很多线，这就是为什么不想使用它

​

var eyesBorder = $('.eyes');


eyesBorder.click(function(e) {
  for (let i = 0; i < eyesBorder.length; i++) {
    var er = $(eyesBorder).index(this);
    console.log(er)
    if (er == 0) {
      eye2.css("display", "none")
      eye3.css("display", "none")
      eye4.css("display", "none")
      eye5.css("display", "none")
      eye1.css("display", "block")
    } else if (er == 1) {
      eye3.css("display", "none")
      eye4.css("display", "none")
      eye5.css("display", "none")
      eye1.css("display", "none")
      eye2.css("display", "block")
    } else if (er == 2) {
      eye2.css("display", "none")
      eye4.css("display", "none")
      eye5.css("display", "none")
      eye1.css("display", "none")
      eye3.css("display", "block")
    } else if (er == 3) {
      eye2.css("display", "none")
      eye3.css("display", "none")
      eye5.css("display", "none")
      eye1.css("display", "none")
      eye4.css("display", "block")
    } else {
      eye2.css("display", "none")
      eye3.css("display", "none")
      eye4.css("display", "none")
      eye1.css("display", "none")
      eye5.css("display", "block")
    }
    break;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="eyesContainer">
  <div class="eyesBorder"> <img class="eyes" src="/emojiMaker/eyes1.png"> </div>
  <div class="eyesBorder"> <img class="eyes" src="/emojiMaker/eyes2.png"> </div>
  <div class="eyesBorder"> <img class="eyes" src="/emojiMaker/eyes3.png"> </div>
</div>

​

Answer 1

差不多了。我没有更多的时间

​

$('.eyesBorder').on("click", function(e) {
  const $tgt = $(e.target);
  const $parent = $(this).closest(".container");
  const $other = $parent.is("#eyesContainer") ? $("#emojiContainer") : $("#eyesContainer");
  $other.find(".eyesBorder").eq($tgt.index()).show()
  if ($parent.is("#eyesContainer")) { 
    $tgt.siblings().show();
  }  
  $tgt.hide();
})

#eyesContainer {
  float: left;
  width: 300px;
  border: 3px solid green;
  min-width: 300px;
  min-height: 400px;
  text-align: center;
}

#emojiContainer {
  float: right;
  min-width: 300px;
  min-height: 400px;
  border: 3px solid red;
  text-align: center;
}

.eyesBorder {
  border: 2px solid black;
  width: 20%;
  text-align: center;
}

img {
  display: none;
  /* remove this when using pngs */
}

div.eyesBorder:nth-child(1) { background-color:red } 
div.eyesBorder:nth-child(2) { background-color:yellow } 
div.eyesBorder:nth-child(3) { background-color:green } 

#emojiContainer .eyesBorder {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="eyesContainer" class="container">
  <div class="eyesBorder"> <img class="eyes" src="/emojiMaker/eyes1.png"> </div>
  <div class="eyesBorder"> <img class="eyes" src="/emojiMaker/eyes2.png"> </div>
  <div class="eyesBorder"> <img class="eyes" src="/emojiMaker/eyes3.png"> </div>
</div>

<div id="emojiContainer" class="container">
  <div class="eyesBorder"> <img class="eyes" src="/emojiMaker/eyes1.png"> </div>
  <div class="eyesBorder"> <img class="eyes" src="/emojiMaker/eyes2.png"> </div>
  <div class="eyesBorder"> <img class="eyes" src="/emojiMaker/eyes3.png"> </div>
</div>

​