List hover show images jquery

Question

안녕하세요, 같은 인덱스를 사용하여 항목 mouseover change image (다른 div)를 할 때해야하고 clicked.When mouseleave 일 때 클릭해야합니다. 나는 무언가를했으나 일하지 않았습니다.

<div class="all-wrap"> 
    <div class="left-side"> 
     <ul> 
      <li>Tittle 1</li> 
      <li>Tittle 2</li> 
      <li>Tittle 3</li> 
      <li>Tittle 4</li> 
      <li>Tittle 5</li> 
     </ul> 
    </div> 
    <div class="right-side"> 
     <img src="http://blog.dominictrumfio.com/wp-content/uploads/2015/08/Lorem-Ipsum-2.jpg" class="active"> 
     <img src="http://blog.nateeul.com/wp-content/uploads/2011/01/Lorem-Ipsum3-01-EDITED.jpg"> 
     <img src="http://blog.dominictrumfio.com/wp-content/uploads/2015/08/Lorem-Ipsum-2.jpg"> 
     <img src="http://blog.nateeul.com/wp-content/uploads/2011/01/Lorem-Ipsum3-01-EDITED.jpg"> 
     <img src="http://blog.dominictrumfio.com/wp-content/uploads/2015/08/Lorem-Ipsum-2.jpg"> 
    </div> 
</div> 

$('.left-side ul li').hover(
function() { 
    $('.right-side img').eq($(this).index()).addClass("active"); 
     $(this).click(funciton(){ 
     $('.right-side img').eq($(this).index()).addClass("active"); 
     }; 
}, function() { 
    $('.right-side img').eq($(this).index()).removeClass("active"); 
}); 

https://jsfiddle.net/tolga748/xju1hj9x/

Answer 1

$(function(){ 
    var index = 0; 
    $('.left-side ul li').hover(function() { 
     $('.right-side img').eq($(this).index()).addClass("active"); 
     $('.right-side img').eq($(this).index()).siblings("img").removeClass("active"); 
    }, function() { 
     $('.right-side img').eq($(this).index()).removeClass("active"); 
     $('.right-side img').eq(index).addClass("active"); 
    }); 

    $('.left-side ul li').click(function(){ 
     index = $(this).index(); 
     var element = $('.right-side img').eq($(this).index()); 
     element.addClass("active"); 
     element.siblings('img').removeClass("active"); 
    }); 
}); 

그냥이와 jQuery를 교체합니다. 그리고 너는 잘 가봐야 해.

Answer 2

당신은 같은 것을 할 수 있습니다

https://jsfiddle.net/tejashsoni111/xju1hj9x/1/

$('.left-side ul li').hover(function(){ 
    $('.right-side img').removeClass('active'); 
    var index = $(this).index(); 
    $('.right-side img').eq(index).addClass("active"); 
}); 

Answer 3

다음 스 니펫을 확인하십시오.

$(".left-side ul li").hover(function(){ 
 
    if(!$('.right-side img').eq($(this).index()).hasClass('not-remove')){ 
 
    $('.right-side img').eq($(this).index()).addClass("active"); 
 
    } 
 
},function(){ 
 
    if(!$('.right-side img').eq($(this).index()).hasClass('not-remove')){ 
 
    $('.right-side img').eq($(this).index()).removeClass("active"); 
 
    } 
 
}); 
 

 
$('.left-side ul li').click(function() { 
 
    $('.right-side img').eq($(this).index()).addClass("not-remove").addClass("active"); 
 
});

.all-wrap 
 
{ 
 
    width: 100%; 
 
    position: absolute; 
 
    float: left; 
 
} 
 
.left-side 
 
{ 
 
    width: 50%; 
 
    float: left; 
 
    position: relative; 
 
} 
 
.left-side ul li 
 
{ 
 
    cursor: pointer; 
 
    margin-bottom:10px; 
 
} 
 
.left-side ul li:hover 
 
{ 
 
    color:red; 
 
} 
 
.right-side 
 
{ 
 
    width: 50%; 
 
    float: left; 
 
    position: relative; 
 
} 
 
.right-side img 
 
{ 
 
    width: 100%; 
 
    float: left; 
 
    display:none; 
 
} 
 
.right-side img.active 
 
{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="all-wrap"> 
 
    <div class="left-side"> 
 
    <ul> 
 
     <li>Tittle 1</li> 
 
     <li>Tittle 2</li> 
 
     <li>Tittle 3</li> 
 
     <li>Tittle 4</li> 
 
     <li>Tittle 5</li> 
 
    </ul> 
 
    </div> 
 
    <div class="right-side"> 
 
    <img src="http://blog.dominictrumfio.com/wp-content/uploads/2015/08/Lorem-Ipsum-2.jpg" class="active"> 
 
    <img src="http://blog.nateeul.com/wp-content/uploads/2011/01/Lorem-Ipsum3-01-EDITED.jpg"> 
 
    <img src="http://blog.dominictrumfio.com/wp-content/uploads/2015/08/Lorem-Ipsum-2.jpg"> 
 
    <img src="http://blog.nateeul.com/wp-content/uploads/2011/01/Lorem-Ipsum3-01-EDITED.jpg"> 
 
    <img src="http://blog.dominictrumfio.com/wp-content/uploads/2015/08/Lorem-Ipsum-2.jpg"> 
 
    </div> 
 
</div>