Question

我为悬停功能编写了一个代码。现在，我问自己如何使这个代码通用，以便在悬停在不同的链接上时显示不同的div。 JavaScript代码如下：

<script>
    $(function() {
        var moveLeft = 20;
        var moveDown = 10;
        $('a#trigger').hover(function(e) {
            $('div#purpose').show();
        }, function() {
            $('div#purpose').hide();
        });
        $('a#trigger').mousemove(function(e) {
        $("div#purpose").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
        });
    });
</script>

我打电话的div如下：

<!-- Purpose: Hover Popup -->
<div class= id="purpose">
    <h3>Purpose</h3>
    <p>
        Test
    </p>
</div>

此外，我添加了一些CSS样式

<!-- Style for Hovering -->
<style type="text/css">
    div#purpose {
        display: none;
        position: absolute;
        width: 280px;
        padding: 10px;
        background: #eeeeee;
        color: #000000;
        border: 1px solid #1a1a1a;
        font-size: 90%;
    }
</style>

有人可以告诉我如何使这段代码变得通用，以便添加从另一个链接调用的更多div吗？

Answer 1

创建一个javascript函数并传入变量（例如link和div）

function foo($link, $div){
    var moveLeft = 20;
    var moveDown = 10;

    $link.hover(function(e) {
      $div.show();

    }, function() {
      $div.hide();
    });

    $link.mousemove(function(e) {
      $div.css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    });
}

对于您现有的行为，请调用以下示例：

foo($('a#trigger'), $("div#purpose"));

这实际上会稍微好一点，因为每次都会使用相同的jQuery引用。但是，根据您实际计划如何使用它，每次进行单独的函数调用可能不是最好的方法。

例如，如果您希望在动态数据上使用它，那么每次对函数进行静态调用都是不明智的。

Answer 2

在HTML中使用自定义function initPano() { // Note: constructed panorama objects have visible: true // set by default. var panorama = new google.maps.StreetViewPanorama( document.getElementById('map'), { position: {lat: 42.345573, lng: -71.098326}, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER }, linksControl: false, panControl: false, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, enableCloseButton: false }); }属性，并使用类来定位一组通用元素，例如：

data-*

和JS

<a class="trigger" data-target="purpose" />

Answer 3

您可以构建触发器元素，使其保存有关要显示的元素的信息：

<a class="trigger" data-show="purpose">...</a>

然后你就像这样一起初始化它们：

$(function() {
    $('.trigger').hover(function() {
        var elementId = $(this).data('show');
        $('#'+elementId).show();
    }, function() {
        var elementId = $(this).data('show');
        $('#'+elementId).hide();
    );
});

Answer 4

您根本不需要任何JavaScript或jQuery - 您只需将CSS与:hover伪类一起使用。

＆＃13;

.menu {
  background-color: #eee;
}

.menuItem {
  display: inline-block;
}

.menu .trigger + .purpose {
  display: none;
  position: absolute;
  background-color: #eee;
}

.menu .trigger:hover + .purpose, .menu .trigger + .purpose:hover {
  display: block;
}

＆＃13;

<div class="menu">
  <div class="menuItem">
    <a href="#" class="trigger">Trigger 1</a>
    <div class="purpose">
      <h3>Purpose 1</h3>
      <p>
        Test 1
      </p>    
    </div>
  </div>
  <div class="menuItem">
    <a href="#" class="trigger">Trigger 2</a>
    <div class="purpose">
      <h3>Purpose 2</h3>
      <p>
        Test 2
      </p>    
    </div>
  </div>
  <div class="menuItem">
    <a href="#" class="trigger">Trigger 3</a>
    <div class="purpose">
      <h3>Purpose 3</h3>
      <p>
        Test 3
      </p>    
    </div>
  </div>
  <div class="menuItem">
    <a href="#" class="trigger">Trigger 4</a>
    <div class="purpose">
      <h3>Purpose 4</h3>
      <p>
        Test 4
      </p>    
    </div>
  </div>
</div>

＆＃13;

通用Javascript代码

4 个答案: