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) 一样应用它，切换函数中的 this 将始终指向单击的按钮，您不需要使用 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 回答