0

есть 4 блока в каждом из которых находится картинка. Каким образом можно сделать так чтобы изначально не было видно изображений во всех четырех блоках, но при клике на блок появлялась картинка внутри него а при клике на другой блок картинка исчезала из предыдущего блока.

body{
text-align:center;
font-size: 20px;
}

img{
width:100%;
height:100%;
}	

.block-1{
border:1px solid red;
padding: 10px;
width: 300px;
position:relative;
margin:3%;
}	

.block-2{
border:1px solid red;
padding: 10px;
width: 300px;
position:relative;
margin:3%;
}		

.block-3{
border:1px solid red;
padding: 10px;
width: 300px;
position:relative;
margin:3%;
}
	
.block-4{
border:1px solid red;
padding: 10px;
width: 300px;
position:relative;
margin:3%;
}
	
	
	
<div class="block-1">
 1 блок  
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/>
</div>


<div class="block-2"> 
 2 блок    
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/>
</div>


<div class="block-3">  
 3 блок   
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/>
</div>


<div class="block-4"> 
 4 блок    
<img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg"/>
</div>

2 ответа 2

1

В смысле вот так?

$('img').hide();
$('div').click(function() {
  $('img').each((i,c)=>c!=$(this).find('img')[0]?$(c).hide():$(c).toggle());
});
body {
  text-align: center;
  font-size: 20px;
}

img {
  width: 100%;
  height: 100%;
}

.block {
  border: 1px solid red;
  padding: 10px;
  width: 300px;
  position: relative;
  margin: 3%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  1 блок
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" />
</div>

<div class="block">
  2 блок
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" />
</div>

<div class="block">
  3 блок
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" />
</div>

<div class="block">
  4 блок
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" />
</div>

2
  • Спасибо! А в чем разница между $(this).find('img').toggle() и $('img').each((i,c)=>c!=$(this).find('img')[0]?$(c).hide():$(c).toggle()); 14 окт 2019 в 9:28
  • toggle() - скрывает/показывает блок в зависимости от текущего состояния, а hide() - всегда только скрывает. Конкретно здесь $('img').each((i,c)=>c!=$(this).find('img')[0]?$(c).hide():$(c).toggle()); - мы получаем все изображения на странице, проходим по ним и если изображение не относится к блоку по которому мы нажали, то вызываем метод hide(), если изображение принадлежит данному блоку, который вызвал событие click, то вызываем метод toggle().
    – Max
    15 окт 2019 в 1:17
0

$('div').click(function() {
  $(this).find('img').toggle()
});
body {
  text-align: center;
  font-size: 20px;
}

img {
  width: 100%;
  height: 100%;
}

div:hover {
  cursor: pointer;
}

.block-1 {
  border: 1px solid red;
  padding: 10px;
  width: 300px;
  position: relative;
  margin: 3%;
}

.block-2 {
  border: 1px solid red;
  padding: 10px;
  width: 300px;
  position: relative;
  margin: 3%;
}

.block-3 {
  border: 1px solid red;
  padding: 10px;
  width: 300px;
  position: relative;
  margin: 3%;
}

.block-4 {
  border: 1px solid red;
  padding: 10px;
  width: 300px;
  position: relative;
  margin: 3%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-1">
  1 блок
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" />
</div>


<div class="block-2">
  2 блок
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" />
</div>


<div class="block-3">
  3 блок
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" />
</div>


<div class="block-4">
  4 блок
  <img src="https://i.ibb.co/D7DhJrj/1499960790146478733.jpg" />
</div>

1
  • Используйте метод toggle(). 11 окт 2019 в 3:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.