不同链接上的不同 Jquery 悬停弹出 div答案

【问题标题】：Different Jquery hover popup divs on different links不同链接上的不同 Jquery 悬停弹出 div
【发布时间】：2012-11-05 16:21:35
【问题描述】：

我有一个 php for 循环，它从 Json 对象中查找数据，并根据这些信息创建不同的 div 和不同的链接：

echo $remoteTownFB . " - " . 
  "<a href=\"#\" id=" . $remoteTownFB . "_trigger>" .$eventName . "</a></br>";

之后，我编写了一个 Java 脚本来创建不同的 div（具有不同的名称），鼠标悬停时应该会弹出（使用 Jquery 脚本）

<script type="text/javascript">
var samplediv = document.createElement('div');
samplediv.id = '<?php echo $remoteTownFB . "_info" ?>';
var txt = document.createTextNode("Informationen über: <?php echo $eventName?>");
document.getElementById('pop-up').appendChild(samplediv);
document.getElementById('pop-up').appendChild(txt);
</script>

我现在的问题是 Jquery 脚本。我在每个城镇名称所在的数组上尝试了$.each，但我无法弄清楚。这是我的基地：

$(function() {
  var moveLeft = 20;
  var moveDown = 10;

  $('a#trigger').hover(function(e) {
      $('div#pop-up').show().;
    }, function() {
      $('div#pop-up').hide();
    }
  );

  $('a#trigger').mousemove(function(e) {
    $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

});

有什么帮助或想法吗？

【问题讨论】：

将类添加到您的 a 标签会简化您的问题
但这只会简化不同链接的问题。我创建了不同的 div，每个 div 中都有不同的信息 - 每个不同的 div 必须通过将鼠标悬停在相应的链接上来解决

标签： php javascript jquery popup hover

【解决方案1】：

首先你忘了关闭 id-property：

echo $remoteTownFB . " - " . 
"<a href=\"#\" id=" . $remoteTownFB . "_trigger\">" .$eventName . "</a></br>";

然后，为了使弹出窗口正常工作，您可以尝试：

<script type="text/javascript">
var samplediv = document.createElement('div');
samplediv.id = '<?php echo $remoteTownFB . "_info" ?>';
samplediv.style.display = 'none';
var txt = document.createTextNode("Informationen über: <?php echo $eventName?>");
samplediv.appendChild(txt);
document.getElementById('pop-up').appendChild(samplediv);    
</script>

jquery 部分是：

<script type="text/javascript">
$(function() {
    $('a[id$="_trigger"]').hover(
        function() {
            var targetSelector = '#' + this.getAttribute('id').replace('_trigger', '_info');
            $('#pop-up, ' + targetSelector).show();
        }, 
        function() {
            var targetSelector = '#' + this.getAttribute('id').replace('_trigger', '_info');
            $('#pop-up, ' + targetSelector).hide();
        }
    );
});
</script>

我不太确定你想用mousemove 电话做什么，所以我不理会它。

【讨论】：