如何將href的值傳遞給javascript，並在單擊超鏈接時在window.location中使用它？

Question

我有兩種類型的超鏈接。當第一個被點擊的時候，href的值被傳遞給函數，但是它的值從來沒有用在window.location！中（因爲它在safari而不是iphone webApp中打開鏈接）。當第二個超鏈接被稱爲href的值永遠不會傳遞給函數，並且href值在safari而不是webApp中打開！任何人都可以幫助我將href的值傳遞給函數，並在window.location中使用它，而不是在Safari上打開它。提前致謝。

<li class="x"><a id="1" title="1" href="./test.php?try" onclick="myFunction(location.href=this.href);"> <img id="Button1" src="./1.png" alt="" width="42" height="42" border="0"><div class="caption" style="color:red">FIRST</div></a></li> 
<li class="x"><a id="2" title="2" href="./test.php" onclick="myFunction(location.href=this.href+'?try&appid='+currentID;return false;);"> <img id="Button2" src="./2.png" alt="" width="42" height="42" border="0"><div class="caption" style="color:red">SECOND</div></a></li> 


<script> 
function myFunction(myLink) { 

alert("hello"+myLink); 

    window.location = myLink; 
} 
</script> 

Answer 1

有在這裏打球幾件事情。正如fiprojects指出的那樣，最好不要內嵌JavaScript（某些原因只是個人偏好）。你最終會重複自己，並很難維護你的代碼（among other reasons）。你最好的選擇是使用Event Listeners（w3schools鏈接，並不總是最好的資源，但這個例子就足夠了）。如果您使用JavaScript庫（jQuery），這些非常簡單。但是因爲你要求JavaScript解決方案，所以我會在我的答案中概述如何做到這一點。

首先，讓我們來格式化您的代碼，使其更易於閱讀：

<li class="x"> 
    <a id="1" title="1" href="./test.php?try" class="myLink"> 
     <img id="Button1" src="http://placehold.it/360x240"> 
     <div class="caption" style="color:red">FIRST</div> 
    </a> 
</li> 
<li class="x"> 
    <a id="2" title="2" href="./test.php" class="myLink"> 
     <img id="Button2" src="http://placehold.it/360x240"> 
     <div class="caption" style="color:red">SECOND</div> 
    </a> 
</li> 

我只在這裏做了一些修改。我刪除了JavaScript onclick。我創建了一個佔位符圖像（僅用於我自己的目的，因爲我沒有圖像，所以您需要將圖像放回原處）。最後，我爲您的<a>添加了class="myLink"。這將使我們能夠更輕鬆地引用與我們的事件監聽器的鏈接。

對於JavaScript的

<script> 
    var linksArray = document.getElementsByClassName("myLink"); 

    var myFunction = function(event) { 
     event.preventDefault(); 
     var href = this.getAttribute("href"); 
     alert('hello ' + href); 
     window.location = link; 
     return false; 
    }; 

    for (var i = 0; i < linksArray.length; i++) { 
     linksArray[i].addEventListener('click', myFunction, false); 
    } 
</script> 

第一行是創建與具有class="myLink"任何元素的數組。我們稍後將遍歷該數組，並添加事件偵聽器。在我們循環之前，我們需要創建你的函數。

爲了防止用戶單擊鏈接時發生的默認操作，我們需要停止傳播。所以我們在這裏使用event.preventDefault()。我還爲該功能添加了return false;。兩者都打算做同樣的事情。

代替傳遞變量，我們將使用this來獲得參考。我們還將使用JavaScript函數getAttribute並將href傳遞給它。這會爲您帶來href的價值。

最後，我們循環了我們的linksArray。我們添加了一個click事件監聽器並將myFunction指定爲callback。現在，無論用戶何時點擊其中一個圖像，該功能都會啓動。

和here's a working example on JSFiddle。

Answer 2

您正在嘗試運行，你可以步行前...

您的JavaScript需要大量的更多的工作。避免將JavaScript放入html中。因此避免了諸如：

onclick="myFunction(location.href=this.href);" 

我可以使用jQuery（JavaScript庫），因爲它會在長期內幫助，因爲它會導致你是跨瀏覽器兼容。

您的「id」標籤應該是字母或字母數字，而不是數字。所以id =「1」是（我相信）即使它有效也是非法的。

其實......對不起....但我越想越想，你真的需要一本好書才能在嘗試你想做的事情之前提升你的javascript，否則你將無法理解對某些人的限制或風險你的工作。

使用jQuery（這本身是用JavaScript編寫的），你可以通過

$("#link1").click(Change1); 
$("#link2").click(Change2); 

function Change1() 
{ 
$("#link1").href("./test.php?try"); 
} 

function Change1() 
{ 
$("#link2").href("./test.php?try"); 
} 

更改URL，如果你的ID標籤從ID改名以上會工作=「1」 ID =「鏈接1」和ID =「2」 ID =「鏈接2」

對不起，我不幫助還不止這些......