Jquery присоединение наведения к элементам массива - PullRequest
Новая
       0

Jquery присоединение наведения к элементам массива

0 голосов
/ 29 октября 2010

Я пытаюсь разместить метод 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>

Ответы [ 4 ]

1 голос
/ 29 октября 2010

Создайте элемент HTML для каждого из ваших элементов в массиве и назначьте ему класс. 

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

Затем вы можете прикрепить к событию hover их всех с помощью jQuery: 

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

</script>
0 голосов
/ 29 октября 2010

Кстати: если вы ищете плагин для увеличения текста jQuery, вы должны взглянуть на http://plugins.jquery.com/project/jMagnify

и для демонстрации: http://www.senamion.com/blog/jMagnify.html

Я думаю, это именно то, что вы пытаетесь сделать. Удачи.

0 голосов
/ 29 октября 2010

Немного более конкретный пример кода из XSaint32

Ссылка на работающий пример jsbin.com: http://jsbin.com/4054602/25/

Вы хотите сгенерировать HTML какописал (и отображаемое div), что вы бы связали событие hover с - пожалуйста, обратите внимание, что вы не можете привязать напрямую к массиву JavaScript, так как нет никакого элемента пользовательского интерфейса, который бы представлял его на экране: 

<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>
0 голосов
/ 29 октября 2010

Вот быстрый, но рабочий подход. Веселитесь;) 

<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> - это было ваше имя ^^), который прикрепляется к телу.

...