Изменение атрибута href при наведении курсора с помощью jQuery - PullRequest
Новая
       29

Изменение атрибута href при наведении курсора с помощью jQuery

0 голосов
/ 06 апреля 2010

Хорошо, у меня есть HTML-страница, которая загружается в другую HTML-страницу через PHP (хорошо, так что это страница PHP, что угодно). Загруженная страница представляет собой список гиперссылок. Мне нужно изменить атрибут href, чтобы сделать гиперссылки относительно местоположения сохраненных изображений, на которые они ссылаются. Когда я загружаю страницу, содержащую гиперссылки, ссылки относятся к серверу веб-хоста, а не к серверу, на котором фактически размещена страница.

Что-то вроде этого: 

<div #screenshots)
<p><a href="image1.htm">Image1</a></p>
<p><a href="image2.htm">Image2</a></p>
<p><a href="image3.htm">Image3</a></p>
<p><a href="image4.htm">Image4</a></p>
<p><a href="image5.htm">Image5</a></p>
</div>

При наведении курсора на ссылки строка состояния отображает ссылку как "http://webHostServer.com/image1.htm".. Если щелкнуть по ней, появится ошибка 404. Мне нужно, чтобы href изменился на что-то подобное, когда наведу на нее курсор: «http://www.actualImageHostServerIPaddress/image1.htm"

Я посмотрел на этот для справки и предложил следующий код jQuery, но по какой-то причине ничего из этого не работает: 

$(document).ready(function(){
 $("button").click(function() {
 $("#screenshots a").addClass('ss');
 });
 $(".ss").each(function()
 {
  $(this).data("oldHref", $(this).attr("href"));
  orig = $(this).attr("href");
  over = "http://208.167.244.33/208.167.244.33/";
 $(this).hover(function() {
  $(this).attr("href", $(this).attr("href").replace(orig, over+orig));
  }, function() {
    $(this).attr("href", $(this).data("oldHref"));
  });
});

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

1 Ответ

0 голосов
/ 06 апреля 2010

Я вижу несколько вопросов. Первый - порядок операций. Вы добавили обработчик щелчка для кнопки в функцию (document) .ready, а также запустили код для добавления функции наведения к элементам класса ss. Проблема в том, что вторая половина кода, который добавляет обработчик события hover, запускается, как только страница готова, но ничто не имеет класса ss, поскольку вы еще не нажали кнопку. На мой взгляд, у вас есть несколько вариантов. Если вам нужна кнопка там, вы можете использовать событие .live (), чтобы убедиться, что после добавления класса ss к ссылке они получат обработчик события. 

$(document).ready(function (){
    $("button").click(function() {
        $("#screenshots a").addClass('ss');
    });

    $('.ss').live('mouseover mouseout',function(event){

        var over = 'http://208.167.244.33/208.167.244.33/';

        if(event.type == 'mouseover'){    
            $(this).data('oldHref', $(this).attr('href'));    
            $(this).attr('href', over + $(this).data('oldHref'));
        }else{
            $(this).attr('href', $(this).data('oldHref'));
        }   
    });
});​

Если вам не нужна кнопка, вы можете немного почистить вещи 

$(document).ready(function (){        
    $('#screenshots a').hover(function(){        
        var over = 'http://208.167.244.33/208.167.244.33/';           
        $(this).data('oldHref', $(this).attr('href'));    
        $(this).attr('href', over + $(this).data('oldHref'));
    },function(){
        $(this).attr('href', $(this).data('oldHref'));
    });
});​

Если вам не нужно сохранять исходный href, вы можете действительно очистить его 

$(document).ready(function (){ 
    var over = 'http://208.167.244.33/208.167.244.33/';
    $('#screenshots a').each(function(){    
        $(this).attr('href', over + $(this).attr('href'));
    });
});
...