более короткий код 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 для каждого DIV (и есть более 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 
    }); 
    }); 

На парении сНа элемента с идентификатором menubar1, menubar2 и т. д. Я хочу добавить свойства css (padding-top и opacity) в p-элемент под этим div с классом clasi1, clasi2 и т. д.

Answer 1

Более короткий javascript? Как звучит нуль?

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

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

Тем не менее, если вы делаете что-то, что не может быть сделано в чистом CSS, обработчик щелчка, например, класс селекторы вместо индивидуальных идентификаторов будет более многоразовые:

$('.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

You можно попробовать:

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