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

Question

I've a php for loop which finds data from an Json object, and creates based on these information different divs and different links:

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

After that, I wrote a Java Script to create different divs (with different names) wich should pop up on mouseover (with a Jquery Script)

<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>

My problem is now the Jquery Script. I tried around with $.each on an Array where every Town name is in, but I couldn't figure it out. This is my base:

$(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);
  });

});

Any help or ideas?

Answer 1

First of you forgot to close the id-property:

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

Then, for the pop-up to work you could try:

<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>

The jquery part would be:

<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>

I'm not really sure what you are trying to do with the mousemove call so I left that alone.