Question

我有三个方框，下面有一行文字根据哪个方框悬停来更改文字。 HTML

<div style="display:inline-block;">
<div id="box1" class="outerbox">
</div>
<div id="box2" class="outerbox">
</div>
<div id="box3" class="outerbox">
</div>
</div>
<div style="display:block;">
  <p id="p1">
  Paragraph 1
  </p>
  <p id="p2">
  Paragraph 2
  </p>
  <p id="p3">
  Paragraph 3
  </p>
</div>

我正在用它运行这个脚本，这似乎是业余重复的。

$(document).ready(function() {
            $("#box1").hover(function() {
                $("#p1").addClass("show");
            }, function() {
                $("#p1").removeClass("show");
            });

      $("#box2").hover(function() {
                $("#p2").addClass("show");
            }, function() {
                $("#p2").removeClass("show");
            });

      $("#box3").hover(function() {
                $("#p3").addClass("show");
            }, function() {
                $("#p3").removeClass("show");
            });
        });

如何更好地编写脚本代码以执行相同的功能。谢谢。 FIDDLE

Answer 1

将事件处理程序附加到类，并为每个框提供一个数据属性，将其链接到相应的<p>。

$(document).ready(function() {
  $(".outerbox").hover(function() {
    $("#" + $(this).data('p')).addClass("show");
  }, function() {
    $("#" + $(this).data('p')).removeClass("show");
  });
});

#box1,
#box2,
#box3 {
  width: 100px;
  height: 100px;
  border: solid 2px #000;
  float: left;
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
p {
  display: none;
}
.show {
  display: block;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display:inline-block;">
  <div id="box1" class="outerbox" data-p="p1">
  </div>
  <div id="box2" class="outerbox" data-p="p2">
  </div>
  <div id="box3" class="outerbox" data-p="p3">
  </div>
</div>
<div style="display:block;">
  <p id="p1">
    Paragraph 1
  </p>
  <p id="p2">
    Paragraph 2
  </p>
  <p id="p3">
    Paragraph 3
  </p>
</div>

Answer 2

这样的事情：

 $(document).ready(function() {
        $(".outerbox").hover(function() {
            var getIndex = $(this).index();//Gets index of hovered elem
            //alert(getIndex);
            $("p").eq(getIndex).addClass("show");//Apply index of hovered elem to p elem
            }, function() {
            $("p").removeClass("show");
        });    
    });

Jquery悬停框，需要更高效的代码

2 个答案: