使用显示在点击时显示一些图像

Question

下面是我的 jquery 代码。这只眼睛 class 包含一些眼睛图像，我想在用户点击它时显示这些图像，所以我正在使用这种显示技术，但它对我不起作用

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>

使用显示在点击时显示一些图像

Show some images on click using display

css

jquery

display