Покажите некоторые изображения на щелчке, используя показ - PullRequest
Новая
       16

Покажите некоторые изображения на щелчке, используя показ

0 голосов
/ 24 апреля 2020

Ниже мой 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>

1 Ответ

0 голосов
/ 24 апреля 2020

Почти. У меня больше нет времени 

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