1

我有两个锚标签：

<a class="location" id="colorado" name="Colorado" href="#">co</a>
<a class="location" id="colorado" name="Colorado" href="#">co</a>

单击其中任何一个时，我只想运行一次函数。我在 jQuery 中查看过 .one() ，但无法正常工作。我正在做的click()是获取 ID 属性并将其存储到变量中。然后我使用该变量来填写输入表单。因为锚标记都具有“位置”类，所以该函数似乎对“位置”类的所有实例都执行此操作。

$(document).ready( function() {

    $('.location').click(function() { //when any a tag with class of location is clicked...

        var clickedId = $(this).attr("id"); //set the ID attribute into var clickedID

        $("#addressInput").val(clickedId); //set value of this input field

        setTimeout( function() {    
            $("#addressSubmit").click(); //submit the form after 1 second of the initial click    
        }, 1000); 

    });     
});

我该如何设置它，以便在我单击带有位置类的锚标记时它可以工作，但它不会对所有具有“位置”类的任何东西重复？

4

4 回答 4

3

使用.one()：

$('.location').one('click',function() { //when any a tag with class of location is clicked...

    var clickedId = $(this).attr("id"); //set the ID attribute into var clickedID

    $("#addressInput").val(clickedId); //set value of this input field

    setTimeout( function() {    
        $("#addressSubmit").click(); //submit the form after 1 second of the initial click    
    }, 1000); 

});

根据站点描述：“将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。”

编辑：你只想跑一次，嗯？

$('.location').on('click',function() {        
    // set value of this input field, and 
    document.getElementById('addressInput').value = this.id;

    // remove click handlers
    $('.location').off('click');

    // submit the form after 1 second delay
    setTimeout( function() {    
        document.getElementById('addressSubmit').submit();
    }, 1000); 
});

这将在第一次运行时删除点击事件。我还冒昧地对 jQuery 进行了一些处理……您正在运行的所有功能都可以在纯 JS 中轻松完成。我还将您触发点击事件更改为仅提交表单......我认为这就是您想要在那里做的事情。

jsFiddle 提供。

于 2013-10-16T19:00:29.643 回答
1

使用您的代码，它将是

$(document).ready( function() {
    var locations =$('.location');
    locations.on('click', function() { //when any a tag with class of location is clicked...

        var clickedId = $(this).attr("id"); //set the ID attribute into var clickedID

        $("#addressInput").val(clickedId); //set value of this input field
        locations.off('click'); //remove the rest of the handlers
        setTimeout( function() {    
            $("#addressSubmit").click(); //submit the form after 1 second of the initial click    
        }, 1000); 

    });     
});

.location尽管使用委托样式（带有3个参数）在s的容器上使用开/关会更干净

于 2013-10-16T19:03:41.797 回答
0

我注意到的第一个问题是您有两个具有相同 ID 的项目，更改第二个标签的 ID。如果 one() 对您不起作用，请尝试此操作。

<script type="text/javascript">
$(document).ready( function() {

    // Bind to the click event
    $('.location').on('click', function() { //when any a tag with class of location is clicked...

        var clickedId = $(this).attr("id"); //set the ID attribute into var clickedID

        $("#addressInput").val(clickedId); //set value of this input field

        // Unbind the event
        $('.location').off('click');

        setTimeout( function() { 

            $("#addressSubmit").click(); //submit the form after 1 second of the initial click

        }, 1000); 

    });


});</script>
于 2013-10-16T19:02:45.847 回答
0

如果我理解正确，您想在单击第一个按钮时运行该功能，然后无论单击哪个按钮都不再运行？还有更优雅的解决方案，但简单的方法是使用一个简单的标志：

$(document).ready( function() {
    flag = true;
    $('.location').click(function() { //when any a tag with class of location is clicked...
        if(!flag) return;
        flag = false;

        var clickedId = $(this).attr("id"); //set the ID attribute into var clickedID

        $("#addressInput").val(clickedId); //set value of this input field

        setTimeout( function() {    
            $("#addressSubmit").click(); //submit the form after 1 second of the initial click    
        }, 1000); 

    });     
});
于 2013-10-16T19:05:54.187 回答