javascript - 将变量名作为 id 传递

Question

我正在使用某个函数在特定类中附加复选框。我有一个函数可以在每次选中复选框时运行。所以我需要获取复选框的名称和 ID。

这是我动态附加复选框的代码部分。这里的值是我想要的 id 和 name 属性。

Answer 1

使用设置ID

$.each(brandNameg, function(key, value) {
    $(".fpblocks .fpblocksBrands_inner ul").append('<label class="checkbox"><input type="checkbox" id="' + value + '"  onclick="selectMainBrand("' + value + '");" />' + value + '</label>');
});

Answer 2

$.each(brandNameg, function(key, value) {

        $(".fpblocks .fpblocksBrands_inner ul").append("<label class='checkbox'><input type='checkbox'  onclick='selectMainBrand(\"" + value + "\");' />" + value + "</label>");

    });

Answer 3

$.each(brandNameg, function(key, value) {

        $(".fpblocks .fpblocksBrands_inner ul").append("<label class='checkbox'><input type='checkbox' id ='someID' name ='someName' />" + value + "</label>");

    });

并在复选框上单击..

$(".fpblocks .fpblocksBrands_inner ul :checkbox").live('click', function(){
 var id = $(this).attr('id'); //get id of checked checkbox
  var name = $(this).attr('name');   //get name of checked checkbox


})

Answer 4

function selectMainBrand(ids) {
    $('#Brands').on("change", "input", function () {   
        console.log("called");
        var selected = this.name;
        console.log(selected);
    });
}

我假设你的 UL 标签有 id="brands"。如果不改变上面的代码如下

    $('.fpblocks').on("change", "input", function () {   

Answer 5

• onclick='selectMainBrand(value);'从输入的生成代码中删除

• 生成复选框后，您可以选择名称和

  $('#Brands input').on("change", function () {
  var name=$(this).attr("name"); var id=$(this).attr("id"); alert （名称）；警报（id）；console.log（选定）；
  }）；

  见演示 http://jsfiddle.net/BbtEG/

Answer 6

您动态创建的 html( <input type='checkbox' onclick='selectMainBrand(value);' />) 没有name, 或id. 你不能通过不存在的东西。为了解决这个问题，生成 aname和 anid来使用。

同样在您的selectMainBrand函数中，您似乎没有使用ids您传入的参数。该函数所做的只是将处理程序绑定到输入，因为您正在使用on它来绑定它，所以看起来很愚蠢。

为什么不使用on委托处理程序呢？如果您委托处理程序，则可以从处理程序中获取nameor id，从而无需将它们作为参数传递（工作演示）。

$.each(brandNameg, function (key, value) {
    var label = $('<label />').addClass('checkbox'),
        input = $('<input />').attr({
            "type": "checkbox",
            "name": "mainBrand" + key, //set the name, appending the key to make it unique
            "id": "mainBrand" + key //set the id, appending the key to make it unique
        });
    $(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});
//delegate the change handler
$('.fpblocks .fpblocksBrands_inner').on("change", '#Brands input', function (e) {
    var selectedName = this.name,
        selectedId = this.id,
        isChecked = this.checked;
    console.log(JSON.stringify({
        "called": true,
        "selectedName": selectedName,
        "selectedId": selectedId,
        "isChecked": isChecked
    }));
});

如果您真的在传递参数方面下定决心，有办法做到这一点，例如在创建输入的循环中绑定处理程序（工作演示）：

$.each(brandNameg, function (key, value) {
    var label = $('<label />').addClass('checkbox'),
        input = $('<input />').attr({
            "type": "checkbox",
            "name": "mainBrand" + key, //set the name, appending the key to make it unique
            "id": "mainBrand" + key //set the id, appending the key to make it unique
        }).click(function (e) {
            var self = $(this), // capture the input as a jQuery object (typically very useful)
                actualHandler = function (id, name) {
                    // do stuff
                    console.log(JSON.stringify({
                        "called": "actualHandler",
                        "selectedName": id,
                        "selectedId": name,
                        "isChecked": self.prop('checked')
                    }));
                };
            actualHandler(this.id, this.name);
            // or
            actualHandler(self.attr('id'), self.attr('name'));
        });
    $(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});

或者您可以onchange在创建输入的循环中设置属性（工作演示）：

window.inputHandler = function (id, name) { // must be added to the global scope, otherwise it won't be visible.
    // do stuff
    console.log(JSON.stringify({
        "called": "inputHandler",
        "selectedName": id,
        "selectedId": name
    }));
};
$.each(brandNameg, function (key, value) {
    var label = $('<label />').addClass('checkbox'),
        input = $('<input />').attr({
            "type": "checkbox",
            "name": "mainBrand" + key, //set the name, appending the key to make it unique
            "id": "mainBrand" + key, //set the id, appending the key to make it unique
            "onchange": "inputHandler('" + "mainBrand" + key + "', '" + "mainBrand" + key + "')"
        });
    $(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});

还有其他方法可以解决这个问题。

就个人而言，我会使用代表团。