第二次单击时,使用JQUERY运行另一个函数

On second click run another function with JQUERY

本文关键字:运行 另一个 函数 JQUERY 使用 单击 第二次      更新时间:2024-05-21

我用JQueryJavascript中编写了一个脚本,当我点击按钮时,会发生一些事情(例如alert("hello")。我现在要做的是当我再次点击同一个按钮来运行不同的功能时。这就是我现在拥有的:

      $(document).ready(function(){
        $(".imgMarker").click(function() {
            var markers = new OpenLayers.Layer.Markers( "Markers" );
            map.addLayer(markers);
            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0)));   
            });
        });

我读到我可以使用toggle()方法,但我无法使其工作。

更新答案和示例:示例

$.fn.clickToggle = function(func1, func2) {
    var funcs = [func1, func2];
    this.data('toggleclicked', 0);
    this.click(function() {
        var data = $(this).data();
        var tc = data.toggleclicked;
        $.proxy(funcs[tc], this)();
        data.toggleclicked = (tc + 1) % 2;
    });
    return this;
};

var addMarker = function(){
    /*
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0))); 
    */
    alert('Add Marker!');
};
var destroyMarker = function(){
    alert('Destroy Marker!');
};
$(".imgMarker").clickToggle(addMarker, destroyMarker);

本质上,我们在这里添加了一个名为clickToggle()的新方法,它将两个函数作为参数。这将在您传递的两个函数之间切换。

您必须删除此单击函数,然后在第一次单击时将其绑定到另一个。试试这个:

$(document).ready(function(){
    $(".imgMarker").click(function() {
        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0))); 
        $(this).unbind("click");
        $(this).click(otherClickFunction);
    });
});

我已经写了一个计数点击按钮的小插件,你可以像一样使用它

$(document).ready(function() {
  $.fn.clickCounter = function () {
    return $(this).data('clicks', $(this).data('clicks') + 1 || 1) && $(this).data('clicks');
  };
  $(".imgMarker").click(function () {
    if ($(this).clickCounter() > 1) {
      console.log('do something');  
    }
  });
});

示例