1

注：私はまだプログラミングの初心者です。

ページの読み込み時にトグル ボタンを作成する JavaScript ページがありますが、ボタンの ID がデータベース テーブルの列名であるため、これらのボタンを個別に使用することはできません。そのため、各ボタンにメソッドや機能を割り当てることができません。

トグル ボタンの作成方法は次のとおりです。

function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
  return '\n<input' + (tbID ? ' id=\'' + tbID + '\'' : '') + 
    (tbClass ? ' class=\'' + tbClass + '\'' : '') + 
    (tbType ? ' type=\'' + tbType + '\'' : '') + 
    (tbValue ? ' value=\'' + tbValue + '\'' : '') + 
    (onClick ? ' onclick=\'' + onClick + '\'' : '') + '>';

}

function DisplayButtons(cableData) {
  var newContent = '';
  $.each(cableData, function (i, item) {
    function toggle() {
      $("#tb" + item.CommonCable)
        .clicked ? $('#MyElement')
        .addClass('clickedButton');
      $("#tb" + item.CommonCable)
        .removeClass("clickedButton");
      $('#MyElement')
        .toggleClass('MyClass');
    }
    newContent += createButtons("tb" + item.CommonCable, 
          null, "submit", item.CommonCable, toggle());
  });
  $("#Categories")
    .html(newContent);
}

注：できるだけ早く助けることができる人は誰でも、どのように各機能または方法を各ボタンに割り当てることができますか？：または、トグルボタンを作成するために使用できる他の方法はありますか？

4

2 に答える 2

2

次のようなものが必要です。

function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
    var btn = $('<input>', {id:(tbID ? tbID : ''),
                         "class":(tbClass ? tbClass : ''),
                         "type":(tbType ? tbType : ''),
                          value:(tbValue ?  tbValue : ''),                        
                         });
     if(onClick)
         btn.click(onClick);
     return btn;
} 
function toggle() {
      $(this)
        .clicked ? $('#MyElement')
        .addClass('clickedButton');
      $(this)
        .removeClass("clickedButton");
      $('#MyElement')
        .toggleClass('MyClass');
    }
function DisplayButtons(cableData) {
  var newContent = [];
  $.each(cableData, function (i, item) {        
    newContent.push(createButtons("tb" + item.CommonCable, 
          null, "submit", item.CommonCable, toggle));
  });
  $("#Categories").empty()
    .append(newContent);
}

jquery スタイルでボタンを作成する方法をご覧ください。また、onclick を追加するときは、次のように、クリック時に呼び出したい関数へのポインターを渡す必要がありますcreateButtons("tb" + item.CommonCable, null, "submit", item.CommonCable, toggle)。コードのようtoogle()に、すぐに関数を実行すると、その関数によって返された値が onclick 値として使用されます。また、新しく作成されたボタンがどのように配列に追加され、 .appendメソッド#categoriesで要素に追加されるかを見てください。.emptyが必要かどうかはわかりませんが、それは .html(newContent) と完全に同じように機能します。そこに残すべきカテゴリにコンテンツがある場合は、削除するだけですempty

UPD また、新しいボタンごとに新しいトグル関数を作成する必要がないことに注意してください。.click(toogle) のように適用すると、このトグル関数は常にクリックされたボタンを指すため、id を使用して検索する必要はありません。コードで .clicked が何であるかわかりません。私の知る限り、jQuery オブジェクトにはそのようなものはありません。

于 2013-02-05T08:42:03.833 に答える
1

id作成したボタンごとに一意のものを生成してみませんか?

何かのようなもの：

 $.each(cableData, function (i, item) {
    function toggle() {
      $("#tb" + i + item.CommonCable)
        .clicked ? $('#MyElement')
        .addClass('clickedButton');
      $("#tb" + i + item.CommonCable)
        .removeClass("clickedButton");
      $('#MyElement')
        .toggleClass('MyClass');
    }
    newContent += createButtons("tb" + i + item.CommonCable, 
          null, "submit", item.CommonCable, toggle());
  });

しかし、私はあなたが間違った方向にいると思います。

各ボタンに同じクラス名を追加できます (例: tableButton)。次に、このクラス名を持つすべての要素にイベントを割り当てます。

  $(".tableButton").on("click", function (event) {
    $('#MyElement').addClass('clickedButton').toggleClass('MyClass');
    $(this).removeClass("clickedButton");
  });

次に、jQuery の準備ができたら、onclickアクションなしで (前の関数によって既にバインドされています)、クラス名を使用してボタンを生成できます。

  $.each(cableData, function (i, item) {
    newContent += createButtons(".tableButton", 
          null, "submit", item.CommonCable);
  });

最終的なコードは次のようになります。

$(function () {
  $(".tableButton").on("click", function (event) {
    $('#MyElement').addClass('clickedButton').toggleClass('MyClass');
    $(this).removeClass("clickedButton");
  });

  var newContent = "";
  $.each(cableData, function (i, item) {
    newContent += createButtons(".tableButton", 
          null, "submit", item.CommonCable);
  });

  $("#Categories").html(newContent);
});
于 2013-02-05T08:43:51.917 に答える