问题
I am making a menu where on rollover, the text of the link changes (fades in). I just copied and pasted a block of code off another thread
<script type="text/javascript">
function fade_new_text(){
$('#what').animate({'opacity': 0}, 500, function () {
$(this).text('new text');
}).animate({'opacity': 1}, 500);
}
function revert(){
$('#what').animate({'opacity': 0}, 500, function () {
$(this).text('do something');
}).animate({'opacity': 1}, 500);
}
</script>
then in the body section I have the menu itself
<body>
<a href="#" id="what" onmouseover="fade_new_text();" onmouseout="revert();">Do something</a>
</body>
This works well with one link, but I need to create 7 of them and hopefully reuse this code in the future. So I need to pass both the link id and the new text to Jquery function for 6 other links, hopefully from 'onmouseover' and 'onmouseout', as it would make the most sense? I am completely new to Jquery, and would appreciate your advice on how to do that.
The test file is at http://www.voxcommunications.ca/test.html
回答1:
Working off of Bryans answer, this way prevents recurring animations when unnecessary, also adds the data-mouseout dynamically instead of rewriting the Link Text in the data-mouseout on each link.
Here is a working Example FIDDLE
HTML
<a class="hoverlink" data-mouseover="Hovering here">Do something</a><br />
<a class="hoverlink" data-mouseover="Hovering again">Do something else</a><br />
<a class="hoverlink" data-mouseover="Hovering some more">Do something yet again</a><br />
<a class="hoverlink" data-mouseover="Hovering yet once more">Do something one last time</a><br />
JQuery
//Add the link text dynamically
$('.hoverlink').each(function() {
$(this).data('mouseout', $(this).text());
});
//Perform hover function and prevent recurring animations
$("body").on("mouseover mouseout", '.hoverlink', function(event) {
var text = $(this).data(event.type);
$(this).stop().animate({"opacity": 0}, 500, function() {
$(this).stop().text(text).animate({"opacity": 1}, 500);
});
});
回答2:
Similar to JofryHS' answer, you can simplify things by taking advantage of data attributes on the anchor tags and the fact that you can bind more than one event to the same handler using jQuery.
HTML
<a href="#" class="hoverlink" id="what" data-mouseover="Hovering over what" data-mouseout="Do something">Do something</a>
<a href="#" class="hoverlink" id="what1" data-mouseover="Hovering over what1" data-mouseout="Do something else">Do something else</a>
JS:
$(".hoverlink").bind("mouseover mouseout", function(e) {
var elem = $(this);
var text = elem.data(e.type); // e.type will have name of the current event
elem.animate({"opacity": 0}, 500, function() {
elem.text(text);
}).animate({"opacity": 1}, 500);
});
JSFIDDLE
回答3:
In general a menu of this type will be a styled unordered list (ul) element, something like this.
<ul id="menu">
<li><a href="#" data-mouseover="Text A">Do 1</a></li>
<li><a href="#" data-mouseover="Text B">Do 2</a></li>
<li><a href="#" data-mouseover="Text C">Do 3</a></li>
<li><a href="#" data-mouseover="Text D">Do 4</a></li>
</ul>
To keep the markup as simple as possible, we only encode the alternative (mouseover) text.
The first time each link is visited, jQuery ensures a record of the original text is kept.
$("#menu").on('mouseenter mouseleave', "a", function(e) {
var $this = $(this);
$this.stop(true).animate({'opacity': 0}, 500, function() {
if(!$this.data('mouseout')) {
$this.data('mouseout', $this.text());
}
$this.text($this.data(e.type));
}).animate({'opacity': 1}, 500);
});
DEMO
回答4:
to reuse your functions rewrite your function like this
<script type="text/javascript">
function fade_new_text(id, txt){
$('#'+id).animate({'opacity': 0}, 500, function () {
$(this).text(txt);
}).animate({'opacity': 1}, 500);
}
function revert(id, txt){
$('#'+id).animate({'opacity': 0}, 500, function () {
$(this).text(txt);
}).animate({'opacity': 1}, 500);
}
</script>
Then in your body section use something like the one below
<body>
<a href="#" id="what" onmouseover="fade_new_text('what','Natalia');" onmouseout="revert('what','Natalia1');">Do something
</a>
<a href="#" id="what1" onmouseover="fade_new_text('what1','Natalia1');" onmouseout="revert('what1','Natalia2');">Do something
</a>
....so on...
</body>
回答5:
May I suggest this:
function fade_new_text(text){
$('#what').animate({'opacity': 0}, 500, function () {
$(this).text(text);
}).animate({'opacity': 1}, 500);
}
function revert(text){
$('#what').animate({'opacity': 0}, 500, function () {
$(this).text(text);
}).animate({'opacity': 1}, 500);
}
$(".coolLink").hover(
function() {
fade_new_text($(this).attr("data-text"));
},
function() {
revert($(this).attr("data-original"));
}
);
And tiny bit modification on your HTML:
<a href="#" id="what" class="coolLink" data-original="Do something" data-text="New Text">Do something
This will work if the text is basically switching back and forth between two text. Now for other links just use the same class="coolLink" with data-original and data-text and you're good to go.
回答6:
Going the route of using a data attribute to add behaviors to your HTML would be the way I would go, you could do it with something like this:
<a href="#" data-fade-text="some text">link one</a>
<a href="#" data-fade-text="some text 2">link two</a>
<a href="#" data-fade-text="some text 3">link three</a>
-
$('[data-fade-text]').each(function(){
var self = $(this);
self.data('original-text', self.text());
});
$('[data-fade-text]').hover(
function(){
var self = $(this);
self.animate({'opacity': 0}, 500, function () {
self.text(self.data('fade-text'));
}).animate({'opacity': 1}, 500);
},
function(){
var self = $(this);
self.animate({'opacity': 0}, 500, function () {
self.text(self.data('original-text'));
}).animate({'opacity': 1}, 500);
}
);
example http://jsfiddle.net/fY5pj/
来源：https://stackoverflow.com/questions/13638328/jquery-pass-contents-to-this-text