Question

注意：我还是编程新手。

我有一个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);
}

注意：任何能够尽快帮助的人，我如何为每个按钮分配每个功能或方法？：或者我可以使用任何其他方式创建我的切换按钮？

Answer 1

你需要这样的东西：

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值。另外，看看新创建的按钮是如何添加到数组中的，而不是添加到#categories元素的.append方法。不确定你是否需要.empty，但这完全像你的.html（newContent）。如果您有类别中的某些内容应该保留在那里，请删除empty

<强> UPD 另请注意，您无需为每个新按钮创建新的切换功能。如果您像.click（toogle）一样应用它，则切换功能将始终指向单击按钮，您无需使用ID找到它。不确定你的代码中是什么.clicked。据我所知，jQuery对象没有那样的东西。

Answer 2

为什么不为每个创建的按钮生成唯一的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);
});

如何将每个功能或方法分配给按钮？

2 个答案: