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');
}

当然，这只会将large字符串替换为super字符串，反之亦然。因此，请定制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（）获取图像名称，稍后可以将其附加到您想要的任何内容！ / p>

<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”。

干杯，戒。

如何使用复选框修改HREF？

3 个答案: