如何在javascript中触发onclick函数之前运行href="#var=something"？答案

【问题标题】：how to run href="#var=something" before onclick function fires in javascript?如何在javascript中触发onclick函数之前运行href="#var=something"？
【发布时间】：2010-05-20 02:22:34
【问题描述】：

我正在使用下面的 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>

问题是它只在链接的第二次单击时执行我所期望的操作，因为它似乎在 href 之前触发 onclick，所以第一次我只是放置 var 而第二次我是实际上得到了我想要的。

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

【问题讨论】：

最后的效果应该是当你点击一个图片时，它会增加#size=n，从而显示不同的图片？
效果是我在网站上为用户保存了一些不同大小的图像，我希望他们能够点击“大拇指、拇指、小拇指”的链接，以便他们可以通过链接点击在不同的图像之间切换，而无需每次页面加载或刷新

标签： c# asp.net javascript jquery visual-studio

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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 未启用，用户最终仍能在问题。然后您的函数代码将只是获取图像的句柄并将源设置为该入站参数。

【讨论】：

【解决方案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>

希望对您有所帮助。

【讨论】：

顺便说一句，如果您当前没有使用 javascript 库...我强烈推荐 jQuery！它让做这样的事情变得轻而易举。