2016-11-07 3 views
1

には、fore-loopでdivを作成し、データベースから文を追加するスクリプトがあります。今私は文からリンクを作りたい、私はリンク(青い下線)のスタイリングを取得しますが、何も起こりません。 はここに私の私のコードの一部です:
E D I T E Djavascriptでデータベースにリンクを追加する

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

私はあなたがスクロールダウンした場合、リンクのコードで作成された '' .. –

+0

を参照してくださいいけません'1: 'So,'、' – malina

+0

あなたの質問を理解するためにもっとコードを共有できますか? clickイベントを処理するメソッドは表示されませんか? –

答えて

1

代わりのイベントmouseover()を使用してmouseout()あなたがホバリングシミュレートjQuery#hover(over, out)方法(オフにマウスを移動し、そして、オブジェクト)を使用することができます。これは、頻繁なタスクに「イン」を提供するカスタムメソッドです。

パラメータの説明:

  • オーバー - コールバック関数マウスが一致要素の上に移動したときに発射します。
  • out - 一致した要素からマウスを離したときに発生するコールバック関数です。

はまた、私はあなたのコードにいくつかのコードのリファクタリングを行い、datenbankオブジェクトの要素1: '<a href="www.google.com">So,</a>'httpsが追加されていることに気づきます。

のための質問とasnwersを参照してください。Why does an anchor tag's href values need http:// preprended to the URL?

コード例:

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(); 
 
    });
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;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 

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

+0

ありがとう!ほんとうに素晴らしい! – malina

+0

こんにちは@malina、もしあなたが改善できるいくつかのコードリファクタを追加したことを確認してください。 –

関連する問題