Jquery將懸停附加到數組元素

我正在試圖將懸停（）方法放在每個數組元素上。然後當光標在字符上滾動時，它會被複制到另一個div中。我有點失落。你有什麼建議嗎？Jquery將懸停附加到數組元素

<html> 
<head> 
<script type="text/javascript" scr="http://code.jquery.com/jquery.min.js"> 
</head> 

<body> 

<script type="text/javascript"> 
var str="one two three four five"; 
var a1 = new Array(); 
a1=str.split(""); 
//document.write(a1.join(" <br /> ")); 
//document.write(str.split("") + "<br />"); 

for (var i=0;i<a1.length;i++) { 

    // for each array element attach hover method, when rollover then feed to over div magnifyView 
    $("a1[i]").hover(function() { 
     // put into magnifyView upon hover on array element 
    }); 
} 

</script> 

<div id='stringToView'><script type="text/javascript">document.getElementById('stringToView').innerHTML = str;</script> </div> 

<br /><br /> 
<div id='magnifyView' style="font-size:36px;"> what's here</div> 

</body> 
</html>

來源

2010-10-29 windsurf88

有一些非常可怕的事情發生在這裏... – 2010-10-29 18:09:28

你的代碼實際上並沒有做任何事情。可能你應該深入瞭解基本的javascript和jQuery。供參考：爲了懸停一個物體，必須有一個與dom的關係。 – pex 2010-10-29 18:15:56

不，代碼不會做任何事情，但它對應該發生的事情有評論。你知道如何將方法附加到JavaScript中的數組元素？我不確定如何做到這一點。這就是我在這裏問的原因。每個數組元素都需要有hover（）。 – windsurf88 2010-10-29 18:27:56

順便說一句：如果你正在尋找一個jQuery文本放大插件，你應該看看http://plugins.jquery.com/project/jMagnify

和演示：http://www.senamion.com/blog/jMagnify.html

我認爲這正是你想要做的。祝你好運。

來源

2010-10-29 19:38:47 pex

是的 - 這是一個很好的。我從那開始，但迷路了。使用該jQuery文本擴展插件，我無法讓角色流入magnifer圖形div或更改懸停，因此這些效果將包含圖形中的文本。你看過那個插件嗎？ – windsurf88 2010-10-29 20:18:53

我加了這個效果...它沒用... $（'＃mag'）。jMagnify（{0121}}} 50％'}， \t \t \t \t lat1Effect：{}， \t \t \t \t lat2Effect：{}， \t \t \t \t lat3Effect：{}， \t \t \t \t resetEffect：{} \t \t \t}）; \t \t \t \t \t}）; – windsurf88 2010-10-29 20:19:32

有什麼建議嗎？ – windsurf88 2010-10-29 20:19:51

爲數組中的每個項目構建一個HTML元素，併爲其分配一個類。

<span class="canHover">...array</span>

然後你就可以連接到所有的人的懸停事件使用jQuery：

<script type="text/javascript"> 
    $(function(){ 
    $('.canHover').hover(function() { 
      // Your hover code here... 
    }); 
    }) 

</script>

來源

2010-10-29 18:09:20 dotariel

for（var i = 0; i – windsurf88 2010-10-29 18:22:03

你不需要$（'。canHover'）在你的循環中。 – dotariel 2010-10-29 18:26:05

什麼也沒得到......

what's here

– windsurf88 2010-10-29 18:34:55

下面是一個簡單但工作方法..玩得開心;）

<html> 
    <head> 
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $(function() { 
     var str  = "one two three four five", 
      array  = str.split(""), 
      viewPort = $('<div />', { id: 'stringToView' }); 

     for(var objId in array) { 
     var obj = $('<span/>', { text: array[objId] }).hover(function() { 
      var clone = $(this).clone(); 
      $('#magnifyView').html(clone); 
     }).appendTo(viewPort); 
     } 

     $('body').prepend(viewPort); 
    }); 
    </script> 
    </head> 
    <body> 
    <div id='magnifyView' style="font-size:36px;"> what's here</div> 
    </body> 
</html>

編輯：一點解釋：我通過你的陣列和用跨度包裹每個字母。可能它沒有跨度，但現在你可以稍後用簡單的$('#stringToView span')來處理它們。每個字母然後得到它的懸停綁定，並被附加到一個持有人（<div id="stringToView"></div> - 這是你的命名^^），它被附加到身體。

來源

2010-10-29 18:46:42 pex

幸運的你，我很無聊:) – pex 2010-10-29 18:52:40

是 - 你的代碼幫助我很多！仍然需要更多！ – windsurf88 2010-10-29 20:22:33

在magnifyView div中顯示的數組部分如何使用「相鄰」的2-3個字符，包括空格？ – windsurf88 2010-11-04 00:03:16

一個從XSaint32

鏈接的代碼稍微具體的例子來工作jsbin.com樣本：http://jsbin.com/4054602/25/

你想生成一些HTML所描述的（和顯示DIV），你會綁定

<body> 
    <ul class="canHover"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    </ul> 
    <div id="stringToView"></div> 
</body>

然後，以線： - 在hover事件請注意，你不能直接，因爲沒有這將是它在屏幕上的UI元素綁定到一個JavaScript數組你懸停事件：

<script type="text/javascript"> 
    $(function(){ // delay execution until DOM is fully constructed 
    $(".canHover li").hover(   // bind to the children LI elements 
     function() {      // mouseEnter event first 
     var text = $(this).text();  // copy 'hovered' text value 
     $("#stringToView").text(text); // set the value in the div 
     }, 
     function() {      // mouseLeave event second 
     $("#stringToView").text(""); // clear the value from the div 
     } 
    ); 
    }); 
</script>

來源

2010-10-29 19:00:36 Goyuix

感謝您的回答！新的JS，我是。 – windsurf88 2010-10-29 20:21:01

Jquery將懸停附加到數組元素

回答

相關問題