較短的jQuery代碼

-1

我是新來的jquery，仍然在學習。我現在所擁有的代碼正常工作，除了它太長而且效率低下之外，我想要的就是它的功能，我想知道是否有辦法讓它變得更短，更動態。有6個div元素較短的jQuery代碼

<header> 
     <div id="menubar1" class="menubar one"> 
     <p class="place"><i id="icon" class="fa fa-apple fa-5x label"></i></p> 
     <p id="clasi1" class="clasi">text</p> 
     </div> 
     <div id="menubar2" class="menubar six"> 
     <p class="place"><i id="icon" class="fa fa-facebook fa-5x label"></i></p> 
     <p id="clasi2" class="clasi">text</p> 
     </div> 
     <div id="menubar3" class="menubar three"> 
     <p class="place"><i id="icon" class="fa fa-pencil fa-5x label"></i></p> 
     <p id="clasi3" class="clasi">text</p> 
     </div> 

    </header>

//還有3個div元素

和jQuery代碼對於每個格（也有4個）

$('#menubar1').on("mouseover", function() { 
    $('#clasi1').css({ 
     'paddingTop': '35px', 
     'opacity': 1 
    }); 
    }).on("mouseleave", function() { 
    $('#clasi1').css({ 
     'paddingTop': '10px', 
     'opacity': 0.6 
    }); 
    }); 

    $('#menubar2').on("mouseover", function() { 
    $('#clasi2').css({ 
     'paddingTop': '35px', 
     'opacity': 1 
    }); 
    }).on("mouseleave", function() { 
    $('#clasi2').css({ 
     'paddingTop': '10px', 
     'opacity': 0.6 
    }); 
    });

在ID爲懸停div元素menubar1，menubar2等。我想添加css屬性（padding-top和opacity）到p元素下的clas1，clasi2等。

來源

2016-01-21 mishke

*「如果有辦法讓它更短更動態」*是。 className選擇器。 –

看起來你可以用CSS中的'：hover'選擇器去掉所有的東西。 – zzzzBov

我剛剛添加div.menubar：hover p.clasi {}在CSS中，這是很容易，但我是盲idk – mishke

較短的JavaScript？零聲音如何？

.menubar .clasi { 
    paddingTop: 10px; 
    opacity: 0.6; 
} 

.menubar:hover .clasi { 
    paddingTop: 35px; 
    opacity: 1; 
}

也就是說，如果你正在做的事情不能在純CSS來實現，例如單擊處理程序，類選擇，而不是單獨的ID將是更具重用性：

$('.menubar').on('click', function() { 
    // 'this' is now the .menubar which was moused over. 
    // $(this).find() will return matching nodes inside it: 
    $(this).find('.clasi').css({ 
    // etc 
    }) 
});

來源

2016-01-21 19:12:49

謝謝。我看到它，並在5分鐘前在css中進行了更改 – mishke

你可以嘗試：

$(".menubar") 
.on("mouseenter", function(){ 
    $(this).find(".clasi").css({ 
     paddingTop: '35px', 
     opacity: 1 
    }); 
}) 
.on("mouseleave", function(){ 
    $(this).find(".clasi").css({ 
     paddingTop: '10px', 
     opacity: 0.6 
    }); 
});

來源

2016-01-21 19:19:22 Leonardo

較短的jQuery代碼

回答

相關問題