Question

好的，我有一个通过PHP加载到另一个html页面的html页面（确定它是一个PHP页面，无论如何）。加载的页面是超链接列表。我需要更改href属性以使超链接相对于它们引用的存储图像的位置。当我加载包含超链接的页面时，链接是相对于Web主机服务器的，而不是该页面实际托管的服务器。

像这样：

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

我查看了this以获得帮助，并推出了以下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"));
  });
});

当我点击按钮时，它不会将类添加到锚标签，所以当我将鼠标悬停在它们上面时，没有任何变化。这里的任何帮助都会很棒。

Answer 1

我看到一些问题。第一个是操作顺序。您在（document）.ready函数中添加了按钮的单击处理程序，并运行代码以将悬停函数添加到ss类项目。问题是，添加悬停事件处理程序的代码的后半部分在页面准备就绪后立即运行，但由于您尚未单击该按钮，因此没有任何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'));
    });
});

使用jQuery在悬停时更改href属性

1 个答案: