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>

機能ごとにボタンがあります

ボタンを処理する関数を作成するよりエレガントな方法はありますか?

例: すべてのボタンを処理する 1 つの関数を作成するにはどうすればよいですか?

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

各リンクに data 属性を追加することをお勧めします。

<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 に答える