リストホバーショーイメージjquery

Question

こんにちは私は、同じインデックスを持つアイテムアイテムのマウスオーバーの変更イメージ（他のdiv）とクリックしたときに滞在する必要があります必要があります。それはクリックした前に何かアクティブである必要があります。私は何かしましたが、動かなかった。

<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>