Question

我写过只是在悬停时显示div，为此jQuery正在关注，我试图让它变得动态，所以代码保持在同一行但是收到错误，有人可以帮助吗？

$(".column-wrapper-main").mouseenter(function() {
  $(".column-wrapper-hov1").css("opacity", "1"); 
  }).mouseleave(function() {
  $(".column-wrapper-hov1").css("opacity", "0"); 
});

$(".column-wrapper-main2").mouseenter(function() {
  $(".column-wrapper-hov2").css("opacity", "1"); 
  }).mouseleave(function() {
  $(".column-wrapper-hov2").css("opacity", "0"); 
});
//Box 3
$(".column-wrapper-main3").mouseenter(function() {
  $(".column-wrapper-hov3").css("opacity", "1"); 
  }).mouseleave(function() {
  $(".column-wrapper-hov3").css("opacity", "0"); 
});

//Box 4
$(".column-wrapper-main4").mouseenter(function() {
  $(".column-wrapper-hov4").css("opacity", "1"); 
  }).mouseleave(function() {
  $(".column-wrapper-hov4").css("opacity", "0"); 
});
//Box 5
$(".column-wrapper-main5").mouseenter(function() {
  $(".column-wrapper-hov5").css("opacity", "1"); 
  }).mouseleave(function() {
  $(".column-wrapper-hov5").css("opacity", "0"); 
});
//Box 6
$(".column-wrapper-main6").mouseenter(function() {
  $(".column-wrapper-hov6").css("opacity", "1"); 
  }).mouseleave(function() {
  $(".column-wrapper-hov6").css("opacity", "0"); 
});
//Box 7
$(".column-wrapper-main7").mouseenter(function() {
  $(".column-wrapper-hov7").css("opacity", "1"); 
  }).mouseleave(function() {
  $(".column-wrapper-hov7").css("opacity", "0"); 
});
//Box 8
$(".column-wrapper-main8").mouseenter(function() {
  $(".column-wrapper-hov8").css("opacity", "1"); 
  }).mouseleave(function() {
  $(".column-wrapper-hov8").css("opacity", "0"); 
});

Answer 1

为什么不将类应用于所有元素？

$('.column-effect').on('mouseenter mouseleave', function(e) {
    $(".column-wrapper-hov" + $(e.delegateTarget).attr('data-index')).css("opacity", e.type == 'mouseenter' ? 1 : 0); 
});

为每个元素分配一个数据属性，如下所示：

<div class="column-wrapper-main column-effect" data-index="1"></div>

再次回顾这个问题，我甚至不会使用JavaScript来完成这项工作。简单的CSS就足够了：

.column-effect {
    opacity : 0;
}
    .column-effect:hover {
        opacity: 1
    }

Answer 2

所有这些都应该使用相同的类，没有数字。比你简单地引用给定上下文中的选择器。这仅在嵌套时才有效。

$(".column-wrapper-main").mouseenter(function() {
  $(".column-wrapper-hov", $(this)).css("opacity", "1");
  }).mouseleave(function() {
  $(".column-wrapper-hov",$(this)).css("opacity", "0");;
});

如果它们没有嵌套，您可以使用data属性来获取目标ID。

$(".column-wrapper-main").mouseenter(function() {
  var target = $(this).data('target');
  $(target).css("opacity", "1");
  }).mouseleave(function() {
  var target = $(this).data('target');
  $(target).css("opacity", "0");
});

Answer 3

首先，从index名称中删除class并向其添加id。并重构你的HTML这样的东西

<div class="column-wrapper-main" id="column-wrapper-main-1">
   <!-- Bla bla bla -->
</div>
<div class="column-wrapper-main" id="column-wrapper-main-2">
   <!-- Bla bla bla -->
</div>

然后在JS / jQuery中你可以遍历

$('.column-wrapper-main').mouseenter(function () {
    var number = $(this).attr('id').split('-')[3];
    $(".column-wrapper-hov" + number).css("opacity", "1");
}).mouseleave(function () {
    var number = $(this).attr('id').split('-')[3];
    $(".column-wrapper-hov" + number).css("opacity", "0");
});

Answer 4

我不确定您的HTML布局，因此我无法对此进行广泛测试，但这可能对您有用。

$("[class^=column-wrapper-main]").mouseenter(function() {
  var letter = ($(this).attr('class'))
  var combined = ".column-wrapper-hov" + letter.substr(letter.length - 1);
  $(combined).css("opacity", "1"); 
  }).mouseleave(function() {
  var letter = ($(this).attr('class'))
  var combined = ".column-wrapper-hov" + letter.substr(letter.length - 1);
  $(combined).css("opacity", "0"); 
});

使jQuery代码动态/更短

4 个答案: