Question

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

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

之后，我编写了一个Java脚本来创建不同的div（具有不同的名称），这些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);
  });

});

任何帮助或想法？

Answer 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电话做什么，所以我就把它留下了。

不同的Jquery悬停弹出窗口在不同的链接上

1 个答案: