更優雅的按鈕提交數據到腳本

我有以下腳本部分

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>

再次爲每個功能我有一個按鈕

有沒有更優雅的方式t o創建處理按鈕的功能？

示例：如何創建一個函數來處理所有按鈕？

的sendData是一個變量，我可以從數據庫

我使用JavaScript，jQuery的，阿賈克斯，PHP和MySQL數據庫，並可以創建按鈕循環很容易地添加到按鈕。

來源

2013-08-29 Gerald Ferreira

你真的*不*使用jQuery – CodingIntrigue

嗨格雷厄姆，我在腳本的其他部分使用Jquery –

你讓查克諾里斯生氣。 – Virus721

給每個按鈕一個屬性，告訴腳本它應該有什麼圖標。您可以使用data-屬性。然後結合到用於每個按鈕的共享選擇器（I選擇給每個按鈕的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-29 14:56:52 CodingIntrigue

另外，如果您使用的是jQuery UI，您可能想要使用除data-icon以外的其他東西，我相當肯定jQuery UI會使用它 – CodingIntrigue

我建議添加每個鏈接的數據屬性：

<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-29 14:57:22

作出這樣一個按鈕：

<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-29 14:57:32 zigdawgydawg

類只需添加到按鈕（都需要相同的類），並使用onclick處理程序與以下代碼

sendData= "map_icon="+this.innerHTML; 
initialize();

來源

2013-08-29 15:01:09 furrie

如果您使用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-29 15:01:09 DevlshOne

<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>

//注意的是，即使對於動態負載結合的Click事件（）函數使用的例子。

來源

2013-08-29 15:02:36

更優雅的按鈕提交數據到腳本

回答

相關問題