jquery - Show some images on click using display

Question

Below is my jquery code. This eyes class contains some eye images which I want to be shown when a user clicks on it so I am using this display technique but its not working for me

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

The technique which is working for me is below but It takes a lot of lines that's why don't want to use it

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>

标签： jquerycssdisplay

Answer 1

Almost. I do not have more time

$('.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>