jQuery：有沒有辦法讓這段代碼更緊湊？

如果你使用mouseover class1a，那麼class2a和class2b的CSS會發生變化。jQuery：有沒有辦法讓這段代碼更緊湊？

它一次又一次地重複，但類名不斷變化。

這導致了很多代碼..我想知道是否有一種方法可以使用jQuery使其更加簡潔？

注意，我當然願意改變類名...只是必須能夠區分它們，你在這個代碼中看到...

$('.class1a').mouseover(function(){ 
    $('.class2a, .class2b').css({height : '50px' , top: '75px'}); 
}).mouseout(function(){ 
    $('.class2a, .class2b').css({height : '25px' , top: '100px'}); 
    }); 

$('.class1b').mouseover(function(){ 
    $('.class2c, .class2d').css({height : '50px' , top: '75px'}); 
}).mouseout(function(){ 
    $('.class2c, .class2d').css({height : '25px' , top: '100px'}); 
    });

來源

2011-07-22 Leahcim

你可以選擇，並且有多個occurances CSS對象預定義變量，也可以使用.hover()方法

var s1 = '.class2a, .class2b'; 
var s2 = '.class2c, .class2d'; 
var css1 = {height : '50px' , top: '75px'}; 
var css2 = {height : '25px' , top: '100px'}; 

$('.class1a').hover(function(){ 
    $(s1).css(css1); 
}, function(){ 
    $(s1).css(css2); 
}); 

$('.class1b').hover(function(){ 
    $(s2).css(css1); 
}, function(){ 
    $(s2).css(css2); 
});

來源

2011-07-22 05:14:43 Teneff

你可以使用.hover()：

$('.class1a').hover(function(){ 
    $('.class2a, .class2b').css({height : '50px' , top: '75px'});}, 
    function(){ 
    $('.class2a, .class2b').css({height : '25px' , top: '100px'});} 
);

爲了簡化代碼，您可以在class2a和class2b的css定義中添加「default css」（25px height等），添加一個.hover類，其中包含鼠標懸停部件的css，然後使用toggleClass()覆蓋此懸停設置：

$('.class1a').hover(function() 
{ $('.class2a, .class2b').toggleClass("hover");}); 

$('.class1b').hover(function() 
{ $('.class2c, .class2d').toggleClass("hover");});

來源

2011-07-22 05:12:06 BrokenGlass

o.k，感謝，根據實際的代碼它並不少，但它更有效率？我一直希望有一種方法可以將所有類名放入一個選擇器並運行一次該函數，但不知道如何跟蹤所有不同的類如何相互交互... – Leahcim

+1使用懸停和使用CSS類而不是實際的CSS。但是，它仍然是N份代碼。 – jfriend00

爲了使這個實際工作，不需要調用toggleClass，當它解除時 - 例如第二個回調到.hover（f1，f2）？實際上，當鼠標懸停時，您只需切換類，但在鼠標離開時不會將其設置回來。 – jfriend00

我真的不喜歡做的代碼N份這樣的，所以我想到了一個不同的做法。我想知道當鼠標懸停在不同的元素上時，是否可以使用頁面結構來辨別要更改哪些元素。例如，如果懸停的東西以及要在懸停期間想要更改的內容都可以放入公共父容器中，那麼可以使用頁面結構使它們都可以像一組jQuery一樣工作這個和適當的類名分配：

$(".blob").hover(function() { 
    $(this).parent().find(".changeMe").addClass("myHover"); 
}, function() { 
    $(this).parent().find(".changeMe").removeClass("myHover"); 
});

這個CSS將懸停函數掛鉤到類「blob」的所有實例。然後，在處理程序中，它獲取當前元素（被徘徊的元素），獲取它的父項，然後找到該父項中具有「changeMe」類的所有項並添加到找到的項中，類「myHover 」。

的HTML外殼應該是這樣的：

<div class="combo"> 
<div class="blob"></div> 
<div class="changeMe"></div> 
</div>

如果現實世界的例子是不是一個共享的父母更復雜，你只需要代碼什麼的關係是成一片的jQuery代碼，然後讓它適用於所有的實例。例如，你甚至可以抓住懸停對象的類名（假設它是「level3」，解析出根名「level」和數字3，然後向數字中添加一個，然後向所有對象添加一個類因爲它是JS，所以你可以創建任何與你的HTML結構相匹配的算法，好處是你可以編寫一段適用於所有對象的代碼，而不是一遍又一遍地重複代碼。

並且，您可以擁有所有這些HTML片段，這些片段全部由一個jQuery服務，您可以添加其他類，並且明顯地將不同的內容或其他div放入此結構的每個副本中。不止一件事要以同樣的方式進行修改，那麼只需在父代中包含多個div它上面有「changeMe」類，它們都會被修改。 jsFiddle中的第二個塊顯示瞭如何用相同的代碼修改同一個塊中的多個事物。

你可以看到它在這裏工作：http://jsfiddle.net/jfriend00/XW75p/。將鼠標懸停在任何藍色條上。所有的藍條都由單個jQuery控制。

另外，通過使用類名代替設置代碼中的CSS，甚至可以讓不同的對象以不同的方式響應相同的jQuery代碼。您可以使用公共類名來觸發jQuery行爲，然後您可以始終分配唯一的類名稱，從而使您的行爲具有唯一性（在CSS中）。

來源

2011-07-22 06:16:24 jfriend00

o.k這看起來很有趣。我會仔細看看它。謝謝 – Leahcim

根據瀏覽器支持要求/ HTML結構，你可以不使用CSS中的hover選擇器來實現這個功能嗎？

來源

2011-07-22 06:46:32 Tryster

他們不試圖改變懸停的元素。他們正試圖改變其他因素。例如，將鼠標懸停在元素A上並更改元素B和C. – jfriend00

jQuery：有沒有辦法讓這段代碼更緊湊？

回答

相關問題