Смена изображений при наведении в отдельных контейнерах

[Noonf]

Помогите пожалуйста с такой задачей. Есть контейнер с изображениями и кратким описанием объекта. В этом контейнере 3 изображения, которые меняются при наведении на определенный div. Таких контейнеров около 100 шт.
Смену изображений реализовал, но при наведении на div сменяются изображения во всех контейнерах. Помогите сделать так, чтобы менялось только у того на который наводишь. Эту идею подсмотрел здесь https://www.kufar.by

Фрагмент кода html, js + скрины прилагаю.

<div class="flat_object_0">
<div class="price f14px white">1 400 000 р.</div>
<div class="switch_1"></div>
<div class="switch_2"></div>
<div class="switch_3"></div>
<div class="foto">
<img src="<images/flat/object/object_1.png" class="foto_1" alt="foto_1">
<img src="<images/flat/object/object_2.png" class="foto_2" alt="foto_2">
<img src="<images/flat/object/object_3.png" class="foto_3" alt="foto_3">
</div>	
<div class="place f12px ">
<img src="<images/slider_sale/icon_place.png" class="icon_place">3-комнатная квартира</div>
<div class="location f12px">
<img src="<images/slider_sale/icon_location.png" class="icon_location">
г. Сосновоборск, Куйбышева 24-19</div>
<a href="#" class="botton_object f18px white aligner">Посмотреть</a>
	
</div>
<div class="flat_object_01">
<div class="price f14px white">1 400 000 р.</div>
<div class="switch_1"></div>
<div class="switch_2"></div>
<div class="switch_3"></div>
<div class="foto">
<img src="<images/flat/object/object_1.png" class="foto_1" alt="foto_1">
<img src="<images/flat/object/object_2.png" class="foto_2" alt="foto_2">
<img src="<images/flat/object/object_3.png" class="foto_3" alt="foto_3">
</div>
<div class="place f12px ">
<img src="<images/slider_sale/icon_place.png" class="icon_place">
3-комнатная квартира</div>
<div class="location f12px">
<img src="<images/slider_sale/icon_location.png" class="icon_location">
г. Сосновоборск, Куйбышева 24-19
</div>
<a href="#" class="botton_object f18px white aligner">Посмотреть</a>
</div>

jQuery(document).ready(function(){
  jQuery(".switch_1, .switch_2, .switch_3").hover(
    function() {
      jQuery( this ).addClass('active');
    }, function() {
      jQuery( this ).removeClass('active');
    }
  );
});



jQuery('.switch_1').hover(function(){
    jQuery('.foto_1').addClass('active');
    jQuery('.foto_2, .foto_3').removeClass('active');
});

jQuery('.switch_2').hover(function(){
    jQuery('.foto_2').addClass('active');
    jQuery('.foto_1, .foto_3').removeClass('active');
});

jQuery('.switch_3').hover(function(){
    jQuery('.foto_3').addClass('active');
    jQuery('.foto_1, .foto_2').removeClass('active');
});

[рони]

Noonf,
можно из классов цифры удалить?

[Noonf]

Ну можно. Только не очень понял к чему вопрос )

[рони]

Noonf,
так проще

[Noonf]

У них стили немного отличаются. Вот фрагмент кода

.switch_1 {
	float: left;
	height: 168px;
	width: 89px;
	border-bottom: 5px solid transparent;
	-webkit-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    cursor: pointer;
    z-index: 100;
    position: absolute;  
}

.switch_2 {
	float: left;
	height: 168px;
	width: 89px;
	margin-left: 89px;
	border-bottom: 5px solid transparent;
	-webkit-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    cursor: pointer;
    z-index: 100;
    position: absolute;
}


.switch_3  {
	float: left;
	height: 168px;
	width: 89px;
	margin-left: 178px;
	border-bottom: 5px solid transparent;
	-webkit-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    cursor: pointer;
    z-index: 100;
    position: absolute;
}

.switch_1.active, .switch_2.active, .switch_3.active {
	border-color: #c40000;
}


.foto {
	position:relative;
}

.foto_1 {
	display: block;
}

.foto_2 {
	display: none;
	position:absolute;
    top: 0%;
    left: 0%;
    width: 267px;
    height: 168px;
}

.foto_3 {
	display: none;
	position:absolute;
    top: 0%;
    left: 0%;
    width: 267px;
    height: 168px;
}

.foto_1.active, .foto_2.active, .foto_3.active {
	display: block;
}

[рони]

Noonf,

добавьте новые классы если и старые нужны

$(function() {
  $(".flat_object").each(function(indx, el) {
    var div = $(".switch"), foto = $(".foto img");
    $(el).on("mouseenter mouseleave", ".switch", function(event) {
      var indx = div.removeClass("active").index(this);
      foto.removeClass("active").eq(indx).addClass("active");
      $(this).toggleClass("active", event.type == "mouseenter");
    });
  });
});

[Noonf]

Спасибо Вам огромное!!!! Очень помогли, сам бы не справился!

[рони]

Noonf,
так правильнее 3 строка

$(function() {
  $(".flat_object").each(function(indx, el) {
    var div = $(".switch", el), foto = $(".foto img",el);
    $(el).on("mouseenter mouseleave", ".switch", function(event) {
      var indx = div.removeClass("active").index(this);
      foto.removeClass("active").eq(indx).addClass("active");
      $(this).toggleClass("active", event.type == "mouseenter");
    });
  });
});

[Noonf]

Еще раз спасибо!