jquery передает содержимое в $(this).text

Я делаю меню, где при опрокидывании текст ссылки меняется (исчезает). Я просто скопировал и вставил блок кода из другого потока

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

тогда в разделе тела у меня само меню

<body>
    <a href="#" id="what" onmouseover="fade_new_text();" onmouseout="revert();">Do something</a>
</body>

Это хорошо работает с одной ссылкой, но мне нужно создать 7 из них и, надеюсь, использовать этот код в будущем. Так что мне нужно передать и идентификатор ссылки, и новый текст в функцию Jquery для 6 других ссылок, надеюсь, из 'onmouseover' и 'onmouseout', так как это будет иметь смысл? Я совершенно новичок в Jquery, и буду признателен за ваш совет, как это сделать.

Тестовый файл находится по адресу http://www.voxcommunications.ca/test.html

Источник

6 ответов

Решение

Отрабатывая ответ Брайана, этот способ предотвращает повторяющиеся анимации, когда в этом нет необходимости, а также динамически добавляет указатель мыши на данные вместо того, чтобы переписывать текст ссылки в указатель данных на каждой ссылке.

Вот рабочий пример 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);
    });

});
Источник

Подобно ответу JofryHS, вы можете упростить вещи, используя преимущества атрибутов данных в тегах привязки и тот факт, что вы можете привязать более одного события к одному и тому же обработчику с помощью 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

Источник

Обычно меню этого типа будет стилизованным элементом неупорядоченного списка (ul), что-то вроде этого.

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

Чтобы сделать разметку максимально простой, мы кодируем только альтернативный текст (при наведении курсора мыши).

При первом посещении каждой ссылки jQuery обеспечивает сохранение исходного текста.

$("#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

Источник

Чтобы повторно использовать ваши функции переписать вашу функцию, как это

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

Затем в разделе вашего тела используйте что-то вроде приведенного ниже

<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>
Источник

Я бы пошел по пути использования атрибута данных для добавления поведения в ваш HTML, вы можете сделать это примерно так:

<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);
    }
);​

пример http://jsfiddle.net/fY5pj/

Источник

Могу ли я предложить это:

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"));
  }
);

И небольшая модификация вашего HTML:

<a href="#" id="what" class="coolLink" data-original="Do something" data-text="New Text">Do something

Это будет работать, если текст в основном переключается между двумя текстами. Теперь для других ссылок просто используйте то же самое class="coolLink" с data-original а также data-text и ты в порядке.

Источник
Другие вопросы по тегам