如何使用復選框修改HREF？

Question

我正在制作一個帶有用戶首選項復選框的圖像庫，該復選框會在單擊縮略圖時顯示大尺寸或超大尺寸的圖像。 我在頁面上有一個如下所示的表單元素：

<input type="checkbox" name="targetbox" id="pref"
    onclick="supersize(this.checked);">
<label for="pref">Supersize Pics</label>

我也有這樣的鏈接和縮略圖：

<a href="images/large/image1.jpg"><img src="images/thumbs/image1.jpg" /></a>

給我帶來麻煩的部分是JavaScript。 到目前為止，這是我能夠完成的工作：

<script language="JavaScript">
    function supersize(checkme) {
        if (checkme)
            where = "images/super/";
        else
            where = "images/large/";

        for (var i=0; i<=(document.links.length-1); i++) {
            document.links[i].href = where;
        }
    }
</script>

這將替換鏈接，但不會替換我的需要方式。 顯然，這將替換整個href ，並且我需要保留“ image1.jpg”，因此新鏈接將類似於：“ images / super / image1.jpg”。 我確定我需要使用數組或將網址分為兩部分。 那就是我難以弄清的部分。 任何幫助，將不勝感激。

Answer 1

我建議使用一個簡單的replace() ：

var href = document.links[i].href;
if (href.indexOf('super') > -1){
    document.links[i].href = href.replace('super','large');
}
else {
    document.links[i].href = href.replace('large','super');
}

當然，這將簡單地用super字符串替換large字符串，反之亦然。 因此，定制您if適合。

參考文獻：

• indexOf() 。
• replace() 。

Answer 2

如果知道最后一個值，則可以使用replace() ：

document.links[i].href = document.links[i].href.replace("last/value/goes/here/", where);

Answer 3

試試這個功能。

hrefLink.lastIndexOf（'/'）+ 1獲取最后一個“ /”的位置，.substr（）獲取圖像名稱，該名稱以后可以附加到任何您想要的名稱上！

<script language="JavaScript">
   function supersize(checkme) {
      if (checkme)
         where = "images/super/";
      else
         where = "images/large/";
      for (var i=0; i<=(document.links.length-1); i++) {
         hrefLink = document.links[i].href;     
         imgName =  hrefLink.substr(hrefLink.lastIndexOf('/')+1);
         document.links[i].href = where+imgName;
      }
   }
</script>

這樣，在您的上下文中，我們使函數獨立於諸如“ super”和“ large”之類的硬編碼單詞。

干杯，哈莎。