jQuery的懸停和選擇的問題

Question

http://www.kars4kids.org/charity/v2/nirangahtml/program_pop/meet_animals.asp

上面的鏈接， 當我選擇在下面圖標之一。 它是對選定狀態的更改，但問題是我需要限制懸停效果並進一步選擇該圖標。 （因爲我正在使用圖像更改）。

下面是我完整的jQuery代碼。

$(document).ready(function(){ 
    $('#animal_content_text_horse').css("display", "block"); 
    $('#animal_pic_horse_span').css("display", "block"); 
    $('#page_animal_img_horse').css("display", "block"); 

$('.animal_thumb_link').each(function() { 

    $(this).click(function(e) { 
    e.preventDefault(); 
    default_set($(this).attr('id')); 

    $(".animal_thumb_link").removeClass("thumbselected"); 
    $(this).addClass("thumbselected"); 
    $(".animal_thumb_link").find('img').addClass("imgHoverable"); 
    $(this).find('img').removeClass("imgHoverable"); 

    }); 

}); 

     // Change the image of hoverable images 
     $(".imgHoverable").hover(function() { 
      var hoverImg = HoverImgOf($(this).attr("src")); 
      $(this).attr("src", hoverImg).hide().fadeIn(0); 
     }, function() { 
      var normalImg = NormalImgOf($(this).attr("src")); 
      $(this).attr("src", normalImg).show(); 
     } 
     ); 


    function HoverImgOf(filename) 
    { 
     var re = new RegExp("(.+)\\.(gif|png|jpg)", "g"); 
     return filename.replace(re, "$1_r.$2"); 
    } 
    function NormalImgOf(filename) 
    { 
     var re = new RegExp("(.+)_r\\.(gif|png|jpg)", "g"); 
     return filename.replace(re, "$1.$2"); 
    } 

}); 

function default_set(obj12){ 

var arr = ["horse_content", "camel_content", "peacock_content", "goat_content", "donkey_content", "rooster_content", "sheep_content", "alpacas_content", "cynthia_content", "rabbit_content", "cow_content"]; 
var arr2 = ["../images/horse_thumb.gif", "../images/camel_thumb.gif", "../images/peacock_thumb.gif", "../images/goat_thumb.gif", "../images/donkey_thumb.gif", "../images/rooster_thumb.gif", "../images/sheep_thumb.gif", "../images/alpacas_thumb.gif", "../images/cynthia_thumb.gif", "../images/rabbit_thumb.gif", "../images/cow_thumb.gif"]; 


for (var i = 0; i <= arr.length; i++) { 
if (arr[ i ] === obj12) { 
    old_url = $("#" + obj12).children('img').attr('src'); 
    new_url = old_url.replace(/thumb/,'thumb_r'); 
    $("#" + obj12).children('img').attr('src',new_url); 
}else{ 
    $('#' +arr[ i ]).children('img').attr('src',arr2[ i ]); 
} 

} 



} 


function load_page(obj1,obj2,obj3){ 
    /* detect current div if so hide */ 
    current_pagepharadiv = document.getElementById("pagepharadiv_hidden").value; 
    current_pageheadertext = document.getElementById("pageheadertext_hidden").value; 
    current_pageimage = document.getElementById("pageimage_hidden").value; 

    $('#' + current_pagepharadiv).css("display", "none"); 
    $('#' + current_pageheadertext).css("display", "none"); 
    $('#' + current_pageimage).css("display", "none"); 

    image_hover(obj1); 
    image_hover(obj2); 
    $('#' + obj3).fadeIn("fast"); 

    //image_hover(obj3); 
    //$('#' + obj1).fadeIn("fast"); 
    //$('#' + obj2).fadeIn("fast"); 
    document.getElementById("pagepharadiv_hidden").value = obj1; 
    document.getElementById("pageheadertext_hidden").value = obj2; 
    document.getElementById("pageimage_hidden").value = obj3; 

} 

可以請你們建議， 乾杯！

Answer 1

在我看來，你真的讓事情變得比他們需要的更復雜。這是我將如何實現頁面：

• 底廣場作爲div的，用css使圖片透明的PNG
• 更改底部方形顏色：懸停
• 生成每個動物在服務器上的整個頂部內容一個div：所以你有一個接一個的11個div，而不是在3個地方隱藏/顯示東西。在我的代碼示例下面我想他們有類animal-content
• 添加每個頂部div的ID作爲HTML5數據屬性對應拇指鏈接

這樣，所有你需要的jQuery做的是：

$(".animal_thumb_link").click(function() { 
    var topId = $(this).data("topId"); 
    $(".animal_thumb_link").removeClass("thumbselected"); 
    $(this).addClass("thumbselected"); 

    $(".animal-content").toggle(function() { return this.id === topId; }); 
});