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元素

和每个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 menubar1，menubar2等悬停div元素。我想将css属性（padding-top和opacity）添加到该div下的p元素，类为clasi1，clasi2等。

Answer 1

更短的JavaScript？零声音怎么样？

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

也就是说，如果您正在做一些无法在纯CSS中完成的事情，例如点击处理程序，类选择器而不是单个ID将更可重用：

api

Answer 2

您可以尝试：

Namespace

更短的jQuery代码

2 个答案: