javascript - 更优雅的按钮将数据提交到脚本

Question

我希望有人能帮忙

我有以下脚本部分

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 数据库，并且可以为按钮创建一个循环。

Answer 1

给每个按钮一个属性，告诉脚本它应该有什么图标。您可以使用 data-属性。然后为每个按钮绑定(bind)一个共享选择器(我选择给每个按钮一个 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>