Question

我有一个至少有60个不同链接的页面，其中至少有10个会有相应的链接，当其中任何一个悬停时，相应的链接需要突出显示。我想出了一种方法（到目前为止是单方面的），但是想确定这是否是最佳方式，还是可以更有效地完成。我不知道是否会出现这种情况，但我不希望有一个100多个链接页面（有30多个相应的链接）需要很长时间来突出显示这两个链接。每个链接至少有5个类选择器。

请参阅演示它的Fiddle ......单方面（盘旋在人身上），但如果我将鼠标悬停在这项运动上，那么此人也需要突出显示。

另外，我不知道要在运行时使用的类。我只知道它将以“startEnd”开头。

$('.block1').hover(
  function() {
    var classes = $(this).attr('class').split(' ');

    for (var x = 0; x < classes.length; x++) {
      if (classes[x].substr(0, 8) === "startEnd") {
        selectedClass = classes[x];
        break;
      }
    }

    $("." + selectedClass).addClass("border");
  },
  function() {
    $("." + selectedClass).removeClass("border");
  }
);

<div class="container">
  <div>
    <div class="startEnd1 block1 green">Don Mattingly</div>
    <div class="startEnd2 block1 green">Michael Jordan</div>
    <div class="startEnd3 block1 green">Peyton Manning</div>
  </div>
  <hr style="clear: left" />
  <h2>Sport</h2>
  <div class="square1 gray startEnd1 p1 p2 p3">Baseball</div>
  <div class="square1 gray startEnd2 p1 p2 p3">Basketball</div>
  <div class="square1 gray startEnd3 p1 p2 p3">Football</div>
</div>

Answer 1

我在这里看到的最简洁的方法是使元素的某些data属性等于两个链接共有的类。没有循环，没有黑客，你可以使用jQuery的.data()方法使你的代码更清晰。例如：

<div class="container">
    <div>
        <div class="startEnd1 block1 green" data-commonclass="startEnd1">Don Mattingly</div>
        <div class="startEnd2 block1 green" data-commonclass="startEnd2">Michael Jordan</div>
        <div class="startEnd3 block1 green" data-commonclass="startEnd3">Peyton Manning</div>
    </div>
    <hr style="clear: left" />
    <h2>Sport</h2>
    <div class="square1 gray startEnd1 p1 p2 p3">Baseball</div>
    <div class="square1 gray startEnd2 p1 p2 p3">Basketball</div>
    <div class="square1 gray startEnd3 p1 p2 p3">Football</div>
</div>

$('.block1').hover(
    function () {
        $("." + $(this).data('commonclass')).addClass("border");
    },
    function () {
        $("." + $(this).data('commonclass')).removeClass("border");
    }
);

您可以看到它正常工作here。

Answer 2

我想出了另一种方法，我无法告诉你它是否更快。

var firstClass;
// Apply this to all divs with class which contains "startEnd" followed
// by classes 'block1' and 'green'
$('[class*="startEnd"].block1.green').hover(
function () {

    // We take the first one since this is the one which matches the
    // links classes
    firstClass = $(this).attr('class').split(/\s+/)[0];

    // Apply
    $("." + firstClass).addClass("border");
},
function () {

    $("." + firstClass).removeClass("border");
}
);

您可能想尝试使用子字符串而不是正则表达式来获取第一个类（这可能会使其更快，您应该尝试制作某种基准测试）。

希望有所帮助

jQuery悬停突出显示悬停链接和相应链接

2 个答案: