Jquery attaching hover to array elements
I am looking at trying to place a hover() method onto each array element. Then when the cursor rolls over the character, it is copied into another div. I am kinda lost. Do you have suggestions?
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquer开发者_运维知识库y.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>
Build out an HTML element for each of your items in the array, and assign it a class.
<span class="canHover">...array</span>
Then you can attach to the hover event of all of them with jQuery:
<script type="text/javascript">
$(function(){
$('.canHover').hover(function() {
// Your hover code here...
});
})
</script>
By the way: If you're looking for a jQuery text-magnify plugin, you should have a look at http://plugins.jquery.com/project/jMagnify
and for demonstration: http://www.senamion.com/blog/jMagnify.html
I think this is just what you're trying to do. Good luck.
Here's a quick but working approach.. Have fun ;)
<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: A little explanation:
I go through your array and wrap each letter with a span. Probably it would work without the span but now you can handle them later with a simple $('#stringToView span').
Every letter then get's it's hover binding and is been appended to a Holder (<div id="stringToView"></div> - that was your naming ^^) which gets prepended to the body.
A slightly more concrete example of the code from XSaint32
Link to working jsbin.com sample: http://jsbin.com/4054602/25/
You would want to generate some html as described (and the display div) that you would bind the hover event to - please note, you can't bind directly to a JavaScript array as there isn't any UI element that would represent it on the screen:
<body>
<ul class="canHover">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="stringToView"></div>
</body>
Then, to wire up your hover event:
<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>
加载中,请稍侯......
精彩评论