如何将每个函数或方法分配给一个按钮

本文关键字：按钮 一个 分配 方法 函数 | 更新日期: 2023-09-27 17:57:33

注意：我还是编程新手。

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

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

如何将每个函数或方法分配给一个按钮

您需要这样的东西：

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来找到它。不确定你的代码中点击了什么。据我所知，jQuery对象并没有类似的东西。

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