Как я могу назначить каждую функцию или метод кнопке?

Question

Примечание: Я все еще новичок в программировании.

У меня есть страница JavaScript, которая создает кнопки переключения при загрузке страницы, но Я не могу использовать эти кнопки самостоятельно, потому что идентификатор кнопки - это имя столбца в моей таблице базы данных. , поэтому я не могу знать это заранее, поэтому я не могу назначить метод или функцию для каждой кнопки.

Это как создается кнопка переключения:

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); 
});