1

我希望有人能帮忙

我有以下脚本部分

function buttonOneClick(){
        sendData= "map_icon=car";
        initialize();
    }

function buttonTwoClick(){
        sendData= "map_icon=boat";
        initialize();
    }
function buttonThreeClick(){
        sendData= "map_icon=motorcycle";
        initialize();
    }
function buttonfourClick(){
        sendData= "map_icon=services";
        initialize();
    }

上述功能可以轻松转到大约 50 个这样的按钮

<button type="btn btn-mini btn-primary" onclick="buttonOneClick()">Cars</button>
<button type="btn btn-mini btn-primary" onclick="buttonTwoClick()">Boats</button>
<button type="btn btn-mini btn-primary" onclick="buttonThreeClick()">Motorcycles</button>
<button type="btn btn-mini btn-primary" onclick="buttonfourClick()">Services</button>

再次为每个功能我有一个按钮

有没有更优雅的方法来创建处理按钮的函数？

示例：如何创建一个函数来处理所有按钮？

这sendData是一个变量，我可以很容易地从数据库中添加到按钮

我正在使用 JavaScript、jquery、Ajax、PHP 和 MYSQL 数据库，并且可以为按钮创建一个循环。

4

6 回答 6

2

给每个按钮一个属性，告诉脚本它应该有什么图标。您可以使用data-属性。然后绑定到每个按钮的共享选择器（我选择给每个按钮一个iconbtn类）：

jQuery

$(function() {
  $(".iconbtn").click(function() {
    sendData= "map_icon=" + $(this).data("icon");
    initialize();
  });
});

HTML

<button type="btn btn-mini btn-primary" class="iconbtn" data-icon="car">Cars</button>
<button type="btn btn-mini btn-primary" class="iconbtn" data-icon="boat">Boats</button>
<button type="btn btn-mini btn-primary" class="iconbtn" data-icon="motorcycle">Motorcycles</button>
<button type="btn btn-mini btn-primary" class="iconbtn" data-icon="services">Services</button>
于 2013-08-29T14:56:52.440 回答
1

我建议为每个链接添加一个数据属性：

<button type="btn btn-mini btn-primary" data-icon="map_icon=car">Cars</button>
<button type="btn btn-mini btn-primary"  data-icon="map_icon=boat">Boats</button>

然后您可以为所有按钮创建一个单击处理程序：

 $(function(){
     $('button').click(function(e){
         var sendData = $(this).attr('data-icon');
         initialize();
     });
 });

请注意，我删除了内联点击处理程序，这使事情变得更干净了。

于 2013-08-29T14:57:22.900 回答
1

制作一个这样的按钮：

<button type="btn btn-mini btn-primary" data-send-data="map_icon=car">Cars</button>

像这样添加jQuery：

$(function() {
    $('button').click(function() {
        var sendData = $(this).data('send-data');
        initialize();
    });
});
于 2013-08-29T14:57:32.027 回答
1 
<div id="some-container">
   <button class="large-button" mapIcon="foo1" >Click</button>
   <button class="large-button" mapIcon="foo2" >Cancel</button>
   <button class="large-button" mapIcon="foo3" >Help</button>
</div>

<script>
   jQuery("#some-container").on("click",".large-button",function(e){
   var theButton=jQuery(e.target);
   var icon=theButton.attr("mapIcon");
      initialize(icon);
   }
</script>

//注意这个例子使用了 on()函数，即使是动态加载也绑定了点击事件。

于 2013-08-29T15:02:36.937 回答
0

只需向按钮添加一个类（都需要相同的类）并使用带有以下代码的 onclick 处理程序

sendData= "map_icon="+this.innerHTML;
initialize();
于 2013-08-29T15:01:09.130 回答
0

如果你使用 jQuery，它看起来像这样：

HTML

<button type="btn btn-mini btn-primary" data-icon="car">Cars</button>
<button type="btn btn-mini btn-primary" data-icon="boat">Boats</button>
<button type="btn btn-mini btn-primary" data-icon="motorcycle">Motorcycles</button>
<button type="btn btn-mini btn-primary" data-icon="services">Services</button>

jQuery

$(function() {
    $('button').click(function(e) {
        e.preventDefault(); // otherwise the button would submit to a new page
        sendData = 'map_icon=' + $(this).data('icon')
        initialize();
    });
});
于 2013-08-29T15:01:09.860 回答