較短的jQuery代碼

Question

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

<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等。

Answer 1

較短的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 
    }) 
}); 

Answer 2

你可以嘗試：

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