将javascript增量文件名添加到html标签中

Question

我有一个需要显示的图片列表。 图片列表很大（超过500张），我不想通过在a代码的href属性的html代码中分别命名它们来加载每张图片。 因此，我使用javascript生成了以1递增的文件名，从而产生了正确的文件路径。 这是JavaScript：

function bigpicture()
    {
        var filepath = "\"images/print/latest/" ;
        var ext = ".png\"";
        var total = filepath + num + ext;
        document.write(total)
        num = num + 1;
    }

当我调用bigpicture（）时，我得到正确的文件路径和名称，并且所有多个调用也将递增。 我的问题是让此字符串显示在我的标签的href属性之后，如下所示：

的HTML

<div class = "big">
        <ul>    
            <li>
                <a href=<script>bigpicture()</script> rel="lightbox" title=""><img class="floated_img" img src="images/print/latest/small/1.png" /></a>
            </li>

        </ul>
</div>

我以为（可以错误地）认为可以像这样调用该函数，但是它不起作用。 谁能告诉我如何以在href后面出现字符串的方式执行脚本？ 谢谢。

Answer 1

您可以将函数放在onclick处理程序中。

onclick处理程序会将变量this绑定到您的节点。

也许您需要与lightbox结合使用onclick类的处理程序，例如onmousedown

如何通过JavaScript更改按钮上<a>标签的href

Answer 2

您的操作方式无效，因为函数调用未绑定到html代码中的任何事件（例如onload或onsubmit），因此不会执行。

我会使用jQuery附加到ul的big格。 您对bigpicture()调用可能如下所示：

<script>

  function bigpicture()
  {
    var filepath = "./images/print/latest/" ;
    var ext = ".png\"";
    for(var i = 0; i < numOfPictures; i++){
        $('#big ul').append('<li>' + filepath + i + ext + '</li>');
      }

  }

  $(function(){     //this is jQuery shorthand for document ready
      bigpicture(); //anything in this anonymous function will execute
    })              //after HTML document has been loaded

</script>

文档准备就绪信息来自此处