使用Jquery的多個或單獨的翻轉。嘲笑更好的解釋

Question

更新：06.29.10這是我目前使用的代碼。在搜索完Jquery文檔後，我非常接近。

$(document).ready(function(){ 

//Rollovers for circle buttons 

    $('img').hover(
     function(){ 
      this.src = this.src.replace("_org","_over"); 
     }, 
     function(){ 
      this.src = this.src.replace("_over","_org"); 
    }); 

//Disjointed rollover - on hover make circles use secondary hover (over2) 

    $(".genBtn80").hover(
     function(){ 
      $(".gen80circle").src = $(".gen80circle").src.replace("_org","_over2"); 
     }, 
     function(){ 
      $(".gen80circle").src = $(".gen80circle").src.replace("_over2","_org"); 
     }); 
}); 

因此，我有關於翻車的一切工作。我有以_org（正常狀態），_over（第一翻轉狀態）和_over2（第二翻轉狀態）爲後綴的圖像。我想現在我的問題在於針對不連貫的翻滾或二次翻轉的圓形按鈕。請參閱樣機鏈接。

下面的樣機正是我需要導航。 Click here for mockup

更新：06.30.10現在工作！ 雖然......我不能發佈多個鏈接...... argh！我會通過測試鏈接發表評論。

我很好奇我如何使用數組和循環來簡化這個，但我不想成爲一個麻煩。我也很困惑，爲什麼上面的代碼從未工作。似乎我選擇了正確的元素，但src從未改變過。我確信我做錯了什麼，但我在這裏學習。 :)

$(document).ready(function(){ 

//Rollovers for circle buttons 

    $(".circleBtn").hover(
     function(){ 
      this.src = this.src.replace("_org","_over"); 
     }, 
     function(){ 
      this.src = this.src.replace("_over","_org"); 
    }); 

//Rollovers for navigation buttons 

    $(".navBtn").hover(
     function(){ 
      this.src = this.src.replace("_org","_over"); 
     }, 
     function(){ 
      this.src = this.src.replace("_over","_org"); 
    }); 

//Disjointed rollovers - use secondary rollover for circle imgs 

    $(".genBtn80").hover(
     function(){ 
      this.src = this.src.replace("_org","_over"); 
      $("#janice_circle").attr("src", "images/janice_over2.gif"); 
      $("#sugi_circle").attr("src", "images/sugi_over2.gif"); 
    }, 
     function(){ 
      this.src = this.src.replace("_over","_org"); 
      $("#janice_circle").attr("src", "images/janice_org.gif"); 
      $("#sugi_circle").attr("src", "images/sugi_org.gif"); 
    }); 

    $(".genBtn70").hover(
     function(){ 
      this.src = this.src.replace("_org","_over"); 
      $("#hatsuko_circle").attr("src", "images/hatsuko_over2.gif"); 
      $("#satoko_circle").attr("src", "images/satoko_over2.gif"); 
    }, 
     function(){ 
      this.src = this.src.replace("_over","_org"); 
      $("#hatsuko_circle").attr("src", "images/hatsuko_org.gif"); 
      $("#satoko_circle").attr("src", "images/satoko_org.gif"); 
    }); 

    $(".genBtn60").hover(
     function(){ 
      this.src = this.src.replace("_org","_over"); 
      $("#noriko_circle").attr("src", "images/noriko_over2.gif"); 
      $("#yuki_circle").attr("src", "images/yuki_over2.gif"); 
    }, 
     function(){ 
      this.src = this.src.replace("_over","_org"); 
      $("#noriko_circle").attr("src", "images/noriko_org.gif"); 
      $("#yuki_circle").attr("src", "images/yuki_org.gif"); 
    }); 

    $(".genBtn50").hover(
     function(){ 
      this.src = this.src.replace("_org","_over"); 
      $("#ritsuko_circle").attr("src", "images/ritsuko_over2.gif"); 
      $("#yuka_circle").attr("src", "images/yuka_over2.gif"); 
    }, 
     function(){ 
      this.src = this.src.replace("_over","_org"); 
      $("#ritsuko_circle").attr("src", "images/ritsuko_org.gif"); 
      $("#yuka_circle").attr("src", "images/yuka_org.gif"); 
    }); 

    $(".genBtn40").hover(
     function(){ 
      this.src = this.src.replace("_org","_over"); 
      $("#christina_circle").attr("src", "images/christina_over2.gif"); 
      $("#chiharu_circle").attr("src", "images/chiharu_over2.gif"); 
    }, 
     function(){ 
      this.src = this.src.replace("_over","_org"); 
      $("#christina_circle").attr("src", "images/christina_org.gif"); 
      $("#chiharu_circle").attr("src", "images/chiharu_org.gif"); 
    }); 

    $(".genBtn30").hover(
     function(){ 
      this.src = this.src.replace("_org","_over"); 
      $("#haruko_circle").attr("src", "images/haruko_over2.gif"); 
      $("#shiho_circle").attr("src", "images/shiho_over2.gif"); 
    }, 
     function(){ 
      this.src = this.src.replace("_over","_org"); 
      $("#haruko_circle").attr("src", "images/haruko_org.gif"); 
      $("#shiho_circle").attr("src", "images/shiho_org.gif"); 
    }); 

    $(".genBtn20").hover(
     function(){ 
      this.src = this.src.replace("_org","_over"); 
      $("#aoi_circle").attr("src", "images/aoi_over2.gif"); 
      $("#tomoko_circle").attr("src", "images/tomoko_over2.gif"); 
      $("#miho_circle").attr("src", "images/miho_over2.gif"); 
    }, 
     function(){ 
      this.src = this.src.replace("_over","_org"); 
      $("#aoi_circle").attr("src", "images/aoi_org.gif"); 
      $("#tomoko_circle").attr("src", "images/tomoko_org.gif"); 
      $("#miho_circle").attr("src", "images/miho_org.gif"); 
    }); 


}); 

Answer 1

我的第一種方法是將圓圈分配給空的css類，以便將它們分組並使用jquery進行選擇。例如，圈子1,4和5可以具有類「nav1_links」。請記住，您可以將多個類分配給一個元素，如果您希望將一個鏈接置於兩個導航鏈接的遮陽傘下方，這非常棒。導航欄1突出顯示1,4和5，導航欄2突出顯示1,2和3 - 因此，圈1將具有屬性class="nav1_links nav2_links"。然後，你可以使用jQuery來訪問相應的圓圈：

$("#nav1").hover(function(){ 
    this.src = this.src.replace("_org","_over"); // Change src for nav1 
    $(".nav1_links").attr("src", "rolloverState.png"); // Change src for all corresponding circles 
}); 

如果每個圓圈的圖像是不同的，然而，這變得更加棘手一點。處理這個問題的最簡單方法（儘管不是最簡潔的方法）就是對每個圓圈重複該行，但將類名稱「.nav1_links」替換爲單個圓圈的標識名稱（「#circleID」）。

更靈活（和複雜）的方法是將一個圓的所有可能的src值放入數組中，然後使用.each（）遍歷當前活動的導航鏈接的所有相關圓並應用適當的src來自每個圓圈的srcs數組。但是數組和循環是一個完全獨立的問題，所以如果這沒有意義，那麼現在就堅持簡單的路線（我不確定你有多少腳本經驗）。

這是否回答你的問題？我承認我對你的脫節/二次翻車概念有些困惑。

Answer 2

有這樣一個巨大的問題沒有簡單的答案。你問的是「我如何製作這個網頁？」

我認爲你早先看過的問題會讓你走上正軌。你最好的選擇是使用.css（）或.addClass（）和.removeClass（）方法。例如，如果你的第一個導航按鈕具有ID =「NAV1」，你希望它突出的按鈕1，4，5，你會做的第一件事是：

$("#nav1").mouseover(function(){ 
    $("#button1").addClass("circleHighlight"); 
    $("#button4").addClass("circleHighlight"); 
    $("#button5").addClass("circleHighlight"); 
}); 

$("#nav1").mouseout(function(){ 
    $("#button1").removeClass("circleHighlight"); 
    $("#button1").removeClass("circleHighlight"); 
    $("#button1").removeClass("circleHighlight"); 
}); 

然後在你的CSS，定義什麼你想讓自己看起來像。如果你想改變的href爲每個圓圈（擺在鏈接和文本等）的動態，你可以像這樣添加一行到第一功能：

$("#button1").attr('href', 'http://www.address.com'); 

另外，如果你想清理一些東西，你可以爲底部的每個導航按鈕創建一個數組，用於存放該按鈕應該訪問哪些圓圈。然後你也可以創建一個導航按鈕的數組。這樣，您可以使用for循環（或jquery中的.each（））對所有導航按鈕進行這些更改，並依次導入每個導航按鈕應影響的所有圓。

這有幫助嗎？如果您需要更具體的幫助，您可能需要提出具體問題。或者只是嘗試一些東西，並與jQuery混亂，直到它的工作 - 這就是我一直在學習。 enter code here