文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >通过数据库添加一个带有javascript的链接

问通过数据库添加一个带有javascript的链接
EN

Stack Overflow用户
提问于 2016-11-07 07:57:47
回答 1查看 46关注 0票数 1

有一个脚本，在前循环中生成div，并将数据库中的一个句子附加到其中。现在我想做一个链接的句子，我确实得到了一个链接的样式(蓝色下划线)，但点击什么都没有发生。下面是我代码的一部分：

E_D I T_E_D

代码语言：javascript
复制
<html>
<style>
    html,body {
                width:100%;
                height:100%;
                margin:0;
                font-family: "Nitti Grotesk",Helvetica,Arial,sans-serif;
            }
.random {
                position:absolute;
                padding:10px;
                font-size:10pt;
                display:inline-block;
 }


 p{display: inline;}

</style>


<body>
    <div class="allescheissehierrein">
  </div>

</body>

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<script>
$(document).ready(function(){

    //einfach loop mit bis 100 oder was auch immer
    for(i=1; i<=10; i++){
        console.log('test');
    //einen div in eine variable speichern
    //es wird für die datenbank "data-hover" auf den i wert gesetzt welcher ja stetig hochzählt darum alle verschieden
    if (i<24){
        var div = '<div data-hover="'+i+'" class="random">#</div>';
    } else if ((i>23) && (i<47)){
        var div = '<div data-hover="'+i+'" class="random">**</div>';
    } else if ((i>46) && (i<97)){
        var div = '<div data-hover="'+i+'" class="random">-</div>';
    } else if ((i>96) && (i<114)){
        var div = '<div data-hover="'+i+'" class="random">1.</div>';
    } else if (i>113){
        var div = '<div data-hover="'+i+'" class="random">~~</div>';
    }

    //diesen die dem allescheissehierrein-div appendieren (100 mal)
    $('.allescheissehierrein').append(div);
  }

  //diese platzier dings funktionion erst nach der platzierung aller divs (diese 100) machen weil sie ja vorher gar nicht existieren
  platzierRandom();

       //richtig mit jquery UND datenbank
     $('.random').mouseover(function(){
            var hoverdata = $(this).data('hover');
            var satzvondatenbank = datenbank[hoverdata];

        console.log('hoverdata', hoverdata);
        console.log('satzvondatenbank', satzvondatenbank);

            $( this ).append( $( "<span>"+satzvondatenbank+"</span>" ).show('slow'));
     }).mouseout(function(){
        $( this ).find( "span:last" ).remove();
     });
 });


 var datenbank = {
 1: '<a href="www.google.com">So,</a>',
 2: 'so',
 3: 'you',
 4: 'think',
 5: 'you',
 6: 'can',
 8: 'tell',
 9: 'Heaven',
 10: 'from',
 11: 'Hell',
 12: 'blue',
 13: 'Skies',
 14: 'from',
 15: 'Pain',
 16: 'Can,',
 17: 'you',
 18: 'tell',
 19: 'a green',
 20: 'field',
 21: 'from',
 22: 'a',
 23: 'cold',
 24: 'steel',
 25: 'rail?',
 26: 'A',
 27: 'Smile',
 28: 'from',
 29: 'a',
 30: 'veil?',
 31: 'Do',
 32: 'you',
 33: 'think',
 34: 'you',
 35: 'can',
 36: 'tell?',
 37: 'And',
 38: 'did',
 39: 'they',
 40: 'get',
 41: 'you',
 42: 'trade',
 43: 'your',
 44: 'heroes,',
 45: 'for',
 46: 'ghosts?',
 47: 'Hot',
 48: 'ashes',
 49: 'for',
 50: 'trees?',
 51: 'Hot',
 52: 'air',
 53: 'for',
 54: 'a',
 55: 'cool',
 56: 'breeze?',
 57: 'Cold',
 58: 'comfort',
 59: 'for',
 60: 'change?',
 61: 'And',
 62: 'did',
 63: 'you',
 64: 'exchange',
 65: 'A',
 66: 'walk',
 67: 'on',
 68: 'part',
 69: 'in',
 70: 'the',
 71: 'war',
 72: 'for',
 73: 'a',
 74: 'leading',
 75: 'role',
 76: 'in',
 77: 'a',
 78: 'cage?',
 79: 'How',
 80: 'I',
 81: 'wish',
 82: 'how',
 83: 'I',
 84: 'wish',
 85: 'you',
 86: 'were',
 87: 'here',
 88: 'We re ',
 89: 'just',
 90: 'two',
 91: 'lost',
 92: 'souls',
 93: 'swimming',
 94: 'in',
 95: 'a',
 96: 'fish',
 97: 'bowl',
 98: 'Year',
 99: 'after',
 100: 'Year',
 101: 'Running',
 102: 'over',
 103: 'the',
 104: 'same',
 105: 'old',
 106: 'ground',
 107: 'What',
 108: 'have',
 109: 'we',
 110: 'found?',
 111: 'the',
 112: 'same',
 113: 'old',
 114: 'fears',
 115: 'Wish',
 116: 'you',
 117: 'were',
 118: 'here'

 };
  function platzierRandom(){

   w=document.body.offsetWidth;
   h=document.body.offsetHeight;
   rd=document.getElementsByTagName('div');

    for(c=0;c<rd.length;c++) {
      if(rd[c].className=='random') {
         xCoord=Math.floor(Math.random()*w);
         yCoord=Math.floor(Math.random()*h);

      if(xCoord>=w-rd[c].offsetWidth-10){
         xCoord=w-rd[c].offsetWidth-10;
       }
      if(xCoord<=10){
         xCoord=10;
       }

      if(yCoord>=h-rd[c].offsetHeight-10){
         yCoord=h-rd[c].offsetHeight-10;
       }
      if(yCoord<=10){
         yCoord=10;
       }

   rd[c].style.left=xCoord+'px';
   rd[c].style.top=yCoord+'px';
   }
  }
 }
</script>

</html>
javascript
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-07 12:34:22

与使用events mouseover()和mouseout()不同，您可以使用模拟悬停的JQuery#hover(完毕，退出)方法(鼠标上下移动对象)。这是一个自定义的方法，它为频繁的任务提供了一个“in”。

参数说明：

  • 在−上，当鼠标移动到匹配的元素上时，要触发回调函数。
  • out−回调函数，在鼠标移出匹配的元素时触发。

还请注意，我对代码进行了一些代码重构，并将https添加到datenbank对象的元素1: '<a href="www.google.com">So,</a>'中。

见问题和相关内容：为什么锚标记的href值需要http://预配置到URL？

代码示例：

​

代码语言：javascript
复制
var $allescheissehierrein = $('.allescheissehierrein'),
    datenbank = {1: '<a href="https://www.google.com">So,</a>', 2: 'so', 3: 'you', 4: 'think', 5: 'you', 6: 'can', 7: 'seven', 8: 'tell', 9: 'Heaven', 10: 'from', 11: 'Hell', 12: 'blue', 13: 'Skies', 14: 'from', 15: 'Pain', 16: 'Can,', 17: 'you', 18: 'tell', 19: 'a green', 20: 'field', 21: 'from', 22: 'a', 23: 'cold', 24: 'steel', 25: 'rail?', 26: 'A', 27: 'Smile', 28: 'from', 29: 'a', 30: 'veil?', 31: 'Do', 32: 'you', 33: 'think', 34: 'you', 35: 'can', 36: 'tell?', 37: 'And', 38: 'did', 39: 'they', 40: 'get', 41: 'you', 42: 'trade', 43: 'your', 44: 'heroes,', 45: 'for', 46: 'ghosts?', 47: 'Hot', 48: 'ashes', 49: 'for', 50: 'trees?', 51: 'Hot', 52: 'air', 53: 'for', 54: 'a', 55: 'cool', 56: 'breeze?', 57: 'Cold', 58: 'comfort', 59: 'for', 60: 'change?', 61: 'And', 62: 'did', 63: 'you', 64: 'exchange', 65: 'A', 66: 'walk', 67: 'on', 68: 'part', 69: 'in', 70: 'the', 71: 'war', 72: 'for', 73: 'a', 74: 'leading', 75: 'role', 76: 'in', 77: 'a', 78: 'cage?', 79: 'How', 80: 'I', 81: 'wish', 82: 'how', 83: 'I', 84: 'wish', 85: 'you', 86: 'were', 87: 'here', 88: 'We re ', 89: 'just', 90: 'two', 91: 'lost', 92: 'souls', 93: 'swimming', 94: 'in', 95: 'a', 96: 'fish', 97: 'bowl', 98: 'Year', 99: 'after', 100: 'Year', 101: 'Running', 102: 'over', 103: 'the', 104: 'same', 105: 'old', 106: 'ground', 107: 'What', 108: 'have', 109: 'we', 110: 'found?', 111: 'the', 112: 'same', 113: 'old', 114: 'fears', 115: 'Wish', 116: 'you', 117: 'were', 118: 'here'},
    simbol = '',
    platzierRandom = function () {
      var w = document.body.offsetWidth,
          h = document.body.offsetHeight,
          rd = document.getElementsByTagName('div');

      for (var c = 0, l = rd.length; c < l; c++) {
        if (rd[c].className !== 'random') {
          continue;
        }

        var xCoord = Math.floor(Math.random() * w),
            yCoord = Math.floor(Math.random() * h);

        switch (true) {
          case (xCoord >= w - rd[c].offsetWidth - 10):
            xCoord = w - rd[c].offsetWidth - 10;
            break;
          case (xCoord <= 10):
            xCoord = 10;
            break;
          case (yCoord >= h - rd[c].offsetHeight - 10):
            yCoord = h - rd[c].offsetHeight - 10;
            break;
          case (yCoord <= 10):
            yCoord = 10;
            break;
        }

        rd[c].style.left = xCoord + 'px';
        rd[c].style.top = yCoord + 'px';
      }
    };

//einfach loop mit bis 100 oder was auch immer
for (var i = 1; i <= 10; i++) {

  //einen div in eine variable speichern
  //es wird für die datenbank "data-hover" auf den i wert gesetzt welcher ja stetig hochzählt darum alle verschieden
  switch (true) {
    case (i < 24):
      simbol = '#';
      break;
    case ((i > 23) && (i < 47)):
      simbol = '**';
      break;
    case ((i > 46) && (i < 97)):
      simbol = '-';
      break;
    case ((i > 96) && (i < 114)):
      simbol = '1.';
      break;
    case (i > 113):
      simbol = '~~';
      break;
  }

  //diesen die dem allescheissehierrein-div appendieren (100 mal)
  $allescheissehierrein.append('<div data-hover="' + i + '" class="random"><p>' + simbol + '</p></div>');
}

//diese platzier dings funktionion erst nach der platzierung aller divs (diese 100) machen weil sie ja vorher gar nicht existieren
platzierRandom();

//richtig mit jquery UND datenbank
$('.random')
  .hover(function () {
    var hoverdata = $(this).data('hover'),
        satzvondatenbank = datenbank[hoverdata];
    $(this).append($('<span>' + satzvondatenbank + '</span>').show('slow'));
  }, function () {
    $(this).find('span:last').remove();
  });
代码语言：javascript
复制
html,body {
  width:100%;
  height:100%;
  margin:0;
  font-family: "Nitti Grotesk",Helvetica,Arial,sans-serif;
}
.random {
  position:absolute;
  padding:30px;
  font-size:10pt;
  display:inline-block;
}
p {display: inline;}
代码语言：javascript
复制
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<body>
  <div class="allescheissehierrein"></div>
</body>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40460319

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档