2010-10-29 2 views
0

Я ищу попытку поместить метод hover() на каждый элемент массива. Затем, когда курсор перемещается по символу, он копируется в другой 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> 
+4

Здесь очень страшные вещи ... –

+0

Ваш код на самом деле ничего хорошего не делает. Вероятно, вы должны немного углубиться в основные javascript и jQuery. FYI: Чтобы навести объект, должно быть отношение к dom. – pex

+0

код не делает ничего хорошего, но у него есть комментарии к тому, что должно произойти. Вы знаете, как прикрепить метод к элементу массива в javascript? Я не уверен, как это сделать. вот почему я спрашиваю здесь. каждый элемент массива должен иметь hover(). – windsurf88

ответ

0

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

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

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

+0

Да - это хорошо. Я начал с этого, но потерялся. С помощью этого плагина jQuery text-magnify я не мог заставить символы втекать в графический div magnifer или изменять зависание, чтобы эффекты содержали текст в графике. вы посмотрели на этот плагин? – windsurf88

+0

Я добавил этот эффект ... он не работал ... $ ('# mag'). JMagnify ({ \t \t \t \t centralEffect: {'background': 'url (MagLens1.png) no-repeat 100% 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

+0

любые предложения? – windsurf88

1

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

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

Затем вы можете прикрепить к парения случае все с JQuery:

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

</script> 
+0

для (var i = 0; i windsurf88

+0

В вашем цикле вам не нужно $ ('. CanHover'). – dotariel

+0

ничего не получаю ...



what's here
windsurf88

0

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

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

EDIT: Немного объяснения: Я просматриваю ваш массив и оберните каждую букву пробелом. Вероятно, это будет работать без пролета, но теперь вы сможете обработать их с помощью простого $('#stringToView span'). Каждое письмо затем получает привязку для привязки и добавляется к держателю (<div id="stringToView"></div> - это было ваше имя ^^), которое добавляется к телу.

+0

Счастливчик, что мне скучно :) – pex

+0

Да - код помог меня много! еще нужно больше! – windsurf88

+0

как раздел массива, отображаемый в div magnifyView, использует «смежные» 2-3 символа, включая пробелы? – windsurf88

0

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

Ссылки на рабочую jsbin.com образец: http://jsbin.com/4054602/25/

Вы хотели бы, чтобы сгенерировать HTML, как описано (и дисплей дел), которые вы бы связать 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

Спасибо за ваш ответ! новый для JS, я. – windsurf88

Смежные вопросы