如何影响多个动态元素中的一个元素答案

【问题标题】：how to influence the one element of the plurality of dynamic elements如何影响多个动态元素中的一个元素
【发布时间】：2015-02-10 21:00:50
【问题描述】：

http://jsfiddle.net/SergeyKozlov/tewyg2js/3/

我通过按钮事件使用动态插入 HTML 代码：

$("#NewItemImg").click(function(e) {
    e.preventDefault();
    itemCount++;

    var element = $("\
                    <div class=\"portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all\">\
                        <div class=\"portlet-header ui-widget-header ui-corner-all\">img " + itemCount + "\
                            <span class='ui-icon ui-icon-closethick portlet-close'></span>\
                        </div>\
                        <div class=\"portlet-content\">\
                            <div class=\"form-group\">\
                                <input type=\"text\" class=\"form-control\" name=\"article[body][][img]\" id=\"ImageURL\" placeholder=\"Image URL\">\
                            </div>\
                            <button id=\"SetImageURL\" type=\"button\" class=\"btn btn-default\">Submit</button>\
                            <img id=\"PanelNewImageURL\" src=\"http://imgde.me/508f93cfb59b5.jpg\" alt=\"2014-12-10T18:04:41.762Z\" title=\"2014-12-10T18:04:41.762Z\" onerror=\"imgError(this);\">\
                        </div>\
                    </div>\
    ");

然后我尝试使用以下代码删除新的动态元素：

$("body").on('click', '.column  .portlet-close', function () {
    $(this).closest( ".portlet" ).remove();
});

在这种情况下它可以工作。问题是如何影响多个动态元素中的一个元素。

$("body").on('click', '.column #SetImageURL', function () {
    //e.preventDefault();
    // itemCount++;
    $("#PanelNewImageURL").show();
    $("#ImageURL").hide();
});

当我使用这段代码时，当你获得任何按钮，并且只作用于第一个。

【问题讨论】：

id 必须对于每个元素都是唯一的。这就是为什么你的代码只作用于给定id 的第一个元素
“如何影响多个动态元素中的一个元素” - 如何what？

标签： javascript jquery html jquery-ui-sortable

【解决方案1】：

您看到此行为是因为 id 属性必须是唯一的，但您使用多个“SetImageURL”实例作为 id。当 jQuery 选择器在其中包含一个 id 引用时（就像这里：on('click', '.column #SetImageURL' . . .），它只作用于具有该 id 的第一个匹配元素，并忽略具有它的任何其他元素。

因此，您要么需要想办法让它与纯类选择器一起工作，要么需要一种方法使 id 值唯一并在选择器中包含这些唯一的 id 值。我会采用第一种方法。 . .但是，无论哪种情况，您都应该真正使您的 id 值独一无二。 :)

编辑：

再次查看您的代码，试试这个：

$("body").on('click', '.column .btn-default', function () {
    //e.preventDefault();
    // itemCount++;
    $(this).siblings("img").show();
    $(this).parent().find(".form-control").hide();
});

【讨论】：