Question

我在<a>标记中有两个缩略图，点击另一个图像（主图像）src将更改为<a> hrefs标记以显示完整图像。

该功能有效，但问题是当我跟踪功能时它会相对于点击次数重复。

如果第一次单击它运行一次，如果它第二次单击它运行两次，依此类推。这是我的代码：

<div class="wraptocenter"><img alt="" src=""  id="myim"  /></div>
  <a href="images/cam1.jpg" class="changemimg"> <img alt="" src="images/10.jpg"  /></a> 
   <a href="images/cam.jpg" class="changemimg" ><img alt="" src="images/9.jpg" /></a> 
   <img src="" id="hiddenimg" style="display:none" />



$(document).ready(function () {
    $(".changemimg").bind('click', set);
    function set() {
        $("#myim").attr("src", "images/indicators.gif");
        var path = $(this).attr("href")
        $("#hiddenimg").attr("src", path);
        $("#hiddenimg").load(function () { alert('hi'); $("#myim").attr("src", path); });
        return false;

    }
});

提前感谢任何建议！

Answer 1

每次单击anchor元素时，都会设置“hiddenimg”元素上的Load事件处理程序。因此，每次单击后，Load事件处理程序的数量都会增加一个。以下代码应解决您的问题

    $(document).ready(function () {
        var path;
        $(".changemimg").bind('click', set);
        $("#hiddenimg").load(function () {
            alert('hi');
            $("#myim").attr("src", path);
        });
        function set() {
            $("#myim").attr("src", "images/Calendaricon.gif");
            path = $(this).attr("href");
            $("#hiddenimg").attr("src", path);
            $("#hiddenimg").attr("style", "display:block");
            return false;
        }
    });

Answer 2

尝试：

$(document).ready(function () {
    $(".changemimg").bind('click', set);

    function set(e) {
       e.preventDefault();

        $("#myim").attr("src", "images/indicators.gif");
        var path = $(this).attr("href");
        var myimg = new Image();
        $(myimg)
            .load(function(){
                alert('hi');
                $('#myim').attr('src', path);
            })
            .attr('src', path);
    }
});

这是demo

jquery问题 - 函数重复

2 个答案: