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

希望能有所幫助。