在javascript中触发onclick函数之前，如何运行href =“＃var = something”？

Question

我正在使用下面的JavaScript来更改asp.net c＃中aspx上的图像

<script language="JavaScript" type="text/javascript">        
        var updateImageWhenHashChanges = function()
        {
            theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a");
            if(window.location.hash == "#size=2")
            {
              theImage.src = "<%# Eval("realfilename", "/files/l{0}") %>";
            }
            else if(window.location.hash == "#size=3")
            {
              theImage.src = "<%# Eval("realfilename", "/files/{0}") %>";
            }
            else if(window.location.hash == "#size=1")
            {
              theImage.src = "<%# Eval("fullthumbname", "/thumbnails/{0}") %>";
            }
            else 
            {

            }
        }       
</script>

这是我用链接称呼它的方式

<a href="#size=3" onclick="updateImageWhenHashChanges();">test</a>

问题是它仅能满足我对链接的第二次点击的期望，因为似乎onclick在href之前触发，所以第一次我只是放置var，第二次我实际上得到了我想要。

有谁知道我该如何解决？ 我试图让图像在每次点击时都发生变化

Answer 1

也许您可以将href替换为javascript:void(0) ，然后在onclick（）脚本结尾处处理链接的“自然”点击行为。

Answer 2

您是否尝试过其他事件，例如onmouseup或onunload？

Answer 3

您应该将当前锚的href传递给函数调用，然后在if语句中使用它，然后返回false，以便不使用默认行为。

var updateImageWhenHashChanges = function(pChoice) 
    { 
        theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a"); 
        if(pChoice == "size2")
        { 
// more lines of picking and choosing... and finally:
return false;

然后在锚点

<a href="size2" onclick="return updateImageWhenHashChanges(this.href);">test</a>

如果您可以使用数据绑定将图像的实际href放入锚的href中，那么效果会更好，这样，如果未启用JavaScript，则用户仍然可以看到有问题的图像。 然后，您的功能代码将只是获取图像的句柄并将源设置为该入站参数。

Answer 4

像这样的事情呢：

<script type="text/javascript">
    var updateImageSize = function(imageType, imageID)
    {
        thisImage = document.getElementById(imageID);
        switch(imageType)
        {   
            case "thumb":
                // change image src to the thumbnail's path
                thisImage.src = "YourThumbNailPath";
            case "medium":
                // change image src to medium image path
                thisImage.src = "YourMediumImagePath";
            case "large":
                // you get the picture
                thisImage.src = "YourLargeImagePath";
            default:
                // whatever you want it to default to
                thisImage.src = "YourThumbNailPath";
        }
    }
</script>

然后执行：

<a href="javascript:void(0);" onclick="updateImageSize('thumb','tl00_ContentPlaceHolder1_Image1a');">Update Image</a>

希望能有所帮助。