Question

我正在尝试将hover（）方法放在每个数组元素上。然后当光标滚过字符时，它将被复制到另一个div中。我有点失落。你有什么建议吗？

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

Answer 1

为数组中的每个项构建一个HTML元素，并为其指定一个类。

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

然后你可以用jQuery附加到所有这些事件的悬停事件：

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

</script>

Answer 2

这是一种快速但有效的方法..玩得开心;）

<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')来处理它们。然后每个字母都是悬停绑定，并附加到一个Holder（<div id="stringToView"></div> - 这是你的命名^^），它被添加到身体前面。

Answer 3

来自XSaint32

的代码稍微更具体的示例

链接到工作jsbin.com样本：http://jsbin.com/4054602/25/

你想要生成一些html，如你所说的那样（以及显示div）将hover事件绑定到 - 请注意，你不能直接绑定到JavaScript数组，因为没有在屏幕上表示它的UI元素：

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

然后，连接您的悬停事件：

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

Answer 4

顺便说一句：如果你正在寻找一个jQuery文本放大插件，你应该看看http://plugins.jquery.com/project/jMagnify

并用于演示：http://www.senamion.com/blog/jMagnify.html

我认为这正是你想要做的。祝你好运。

Jquery将悬停附加到数组元素

4 个答案: