Question

我使用Javascript在JQuery编写了一个脚本，当我点击按钮时会发生一些事情（例如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（）方法，但我无法使其工作。

Answer 1

您必须删除此单击功能，然后在第一次单击时将其绑定到另一个。试试这个：

$(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);
    });
});

Answer 2

我写过点击按钮的小插件，你可以这样使用

$(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');  
    }
  });
});

Example

Answer 3

更新了答案和示例：EXAMPLE

$.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()的新方法，它将两个函数作为参数。这将在您传递的两个函数之间切换。

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

3 个答案: