如何在data-src中增加文件引用？

Question

我正在尝试创建一个页面，当我单击img时，data-src属性中的数字将增加1。因此，我可以将我的图像编号为1，或者在图像的两侧都有一个箭头，一个将增加一个，一个将减少一个，以创建幻灯片？

<!DOCTYPE html>
<html>
<head>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/gif-zoomer.js"></script>
    <link rel="stylesheet" type="text/css" href="css/gif-zoomer.css">
</head>
<body>
    <div class="zoomer-loading">loading <span class="spinner"></span></div>
    <div class="zoomer-img" data-src="img/1.gif"></div></a>
</body>
</html>

Answer 1

$('zoomer-img').click(function(){
    var that =     $(this);
    var num = parseInt(that.data('src').substring(that.data('src').indexOf('img/'),that.lastIndexOf('.'))) + 1;
    that.data('src','img/'+num+'.gif');
});

您可以通过获取data-src attr中的数字来递增。

Answer 2

您可以将计数器存储在不同的属性中，这样就不必每次都解析data-src

<div class="zoomer-img" data-src="img/1.gif" data-counter="1"></div>

然后是jQuery：

$(".zoomer-img").click(function(){
    var counter = parseInt($(this).data("counter"));
    counter++;
    $(this).attr("data-counter",counter)
           .attr("data-src","img/"+counter+".gif");
});
</script>

Answer 3

尝试使用.replace()

​

$(".zoomer-img").click(function() {
  $(this).data("src", $(this).data("src").replace(/(\d+)/, function(m) {
    return 1 + Number(m)
  }))
  $(this).html($(this).data().src)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="zoomer-loading">loading <span class="spinner"></span>
</div>
<div class="zoomer-img" data-src="img/1.gif">click</div>

​