如何更改jquery中的类，但从另一个对象中删除该类

Question

我有问题。我不知道如何解决这个问题

HTML代码：

<div class="image">
 <a href="#">
       <img src="images/image1.jpg" id="mainimg-1">
  </a>
</div>

      <div class="otherthumbnailcontainer">
        <div class="thumbnailimages" id="thumbnailcont-1">
            <img src="images/image1.jpg" id="thumbnail-1" onMouseOver="changeimage('images/image1.jpg','mainimg-1','thumbnail-1','thumbnailcont-1');" class="thumbsmallimg selectedthumb">

            <img src="images/image2.jpg" id="thumbnail-2" onMouseOver="changeimage('images/image2.jpg','mainimg-1','thumbnail-2','thumbnailcont-1');" class="thumbsmallimg">

            <img src="images/image3.jpg" id="thumbnail-3" onMouseOver="changeimage('images/image3.jpg','mainimg-1','thumbnail-3','thumbnailcont-1');" class="thumbsmallimg">

            <img src="images/image4.jpg" id="thumbnail-4" onMouseOver="changeimage('images/image4.jpg','mainimg-1','thumbnail-4','thumbnailcont-1');" class="thumbsmallimg">  

            <img src="images/image5.jpg" id="thumbnail-5" onMouseOver="changeimage('images/image5.jpg','mainimg-1','thumbnail-5','thumbnailcont-1');" class="thumbsmallimg">  
        </div>
    </div>

这是代码：

function changeimage(thumburl,mainimgid,thumbnailimg,thumbmaindiv)
{
     $('#'+mainimgid).attr("src", thumburl);
    // $('#'+thumbnailimg).add("thumbsmallimg selectedthumb");
     $('#'+thumbnailimg).removeClass("selectedthumb").addClass('thumbsmallimg');
     // $('#'+thumbnailimg).toggleClass("selectedthumb");
}

现在，我想在网站页面上完全加载这两个类的第一个图像--“拇指选择拇指”--但是当鼠标在另一个图像上移动时，类“selected拇指”将从一个图像切换到另一个图像。

编辑： http://jsfiddle.net/nZMpW/检查此链接。它就像一个产品图片库，当你将鼠标悬停在下方的图像上时，它就会出现在大图像中。但首先，向下图像被选中，如果你在另一个图像上移动，它在大图像中出现，但不是选择。css这个“：悬停”选项只在鼠标在那个图像上运行时才能工作，但我不想这样做

Answer 1

删除所有onmouseover事件，并在$(document).ready()部分中使用以下jquery代码

 $(".thumbsmallimg").mouseover(function() {
     $("#mainimg-1").attr("src", this.src);
     $(".selectedthumb").removeClass("selectedthumb");
     $(this).addClass("selectedthumb");    
 });

而且，如果希望它处理几组缩略图/大图，可以使用data()属性：

  <img src="http://www.yoono.com/static/yoono_com_v8/img/iphone_yoono.png" id="thumbnail-1"  class="thumbsmallimg selectedthumb" data-big-image="mainimg-1">
  <img src="http://www1.pcmag.com/media/images/302835-apple-iphone-5-sprint.jpg" id="thumbnail-2"  class="thumbsmallimg" data-big-image="mainimg-1">
 .....

在jqQuery中：

$(".thumbsmallimg").mouseover(function() {
    $("#" + $(this).data("big-image")).attr("src", this.src);
    $(".selectedthumb").removeClass("selectedthumb");
    $(this).addClass("selectedthumb");    
});

这是您的小提琴再次更新

Answer 2

相反，在css中选择了拇指，将这些样式放入.thumbsmallimg:hover{

.thumbsmallimg:hover{
  /* the styles that wrere in class .selectedthumb */
}