如何使用多个 ID 运行特定功能答案

【问题标题】：how to run a specific function with several ID's如何使用多个 ID 运行特定功能
【发布时间】：2016-04-09 15:36:41
【问题描述】：

我有一个包含 5 个 php 文件的 php 页面。在每个文件中，我为每个 php 文件添加了一个 input[button]，当用户单击它时，该函数将被触发。由于我不允许在页面中使用相同的 ID，我很困惑为每个 ID 应用 $(document).ready(function(){..}) 。我该如何处理？更清楚：我有（'#add_more1,#add_more2,#add_more3,#add_more4,#add_more5）。我想要的是当用户点击每个 ID 时，它会触发下面的代码。例如，如果他点击 ('#add_more2') ，它将运行代码非常感谢。

 //  To add new input file field dynamically, on click of "Add More Files" button below function will be executed.
$('#add_more2').click(function() {
    $('#show2').append($("<div/>", {
        id: 'filediv'
    }).fadeIn('slow').append($("<input/>", {
        name: 'file[]',
        type: 'file',
        id: 'file'
    })));
});
// Following function will executes on change event of file input to select different file.
$('body').on('change', '#file', function() {
    if (this.files && this.files[0]) {
        counter += 1; // Incrementing global variable by 1. 
        $(this).before("<div id='abcd" + counter + "' class='abcd'><img id='previewimg" + counter + "' src=''/></div>");
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
        $(this).hide();
        $("#abcd" + counter).append($("<i/>", {
            id: 'img',
            top:0,
            class: 'fa fa-times',
            alt: 'delete'
        }).click(function() {
            $(this).parent().parent().remove();
        }));
    }
});
// To Preview Image
function imageIsLoaded(e) {
    $('#previewimg' + counter).attr('src', e.target.result);
};
$('#upload').click(function(e) {
    var name = $(":file").val();
    if (!name) {
        alert("First Image Must Be Selected");
        e.preventDefault();
    }
});

【问题讨论】：

是否应该每个具有id 的元素以#add_more 开头，点击1-5 次将div 附加到#show2 ？或者是否还有以#show 1-5 开头的id 对应于#add_more 1-5 的元素？
还有以#show1,show2,... ,#show5开头的id

标签： jquery document

【解决方案1】：

您可以使用以选择器开头的属性，String.prototype.replace() 和RegExp /\D/g 来替换不是数字的id 的一部分，检索元素id 的数字部分以选择具有id 的对应元素以#show 开头。

    $("[id^=add_more]").click(function() {
        $("#show" + this.id.replace(/\D/g, "")).append($("<div/>", {
            id: "filediv"
        }).fadeIn("slow").append($("<input/>", {
            name: "file[]",
            type: "file",
            id: "file"
        })));
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="add_more1">
  add_more1
  </div>
<div id="add_more2">
  add_more2
  </div>
<div id="add_more3">
  add_more3
  </div>
<div id="add_more4">
  add_more4
  </div>
<div id="add_more5">
  add_more5
  </div>

<div id="show1">
  show1
  </div>
<div id="show2">
  show2
  </div>
<div id="show3">
  show3
  </div>
<div id="show4">
  show4
  </div>
<div id="show5">
  show5
  </div>

【讨论】：

@guest271214。更清楚：我有 5 个不同的 id，比如 add_more1、add_more2、....、add_more5，还有 5 个不同的 id 来显示这个 div 内的图像，比如 show1、show2、...、show5。我想要的是当用户单击 add_more1 时，它会附加到 show1，如果单击 add_more2，它会附加到 show2 中，依此类推。注意：所有 id 都在 php 文件中。我该如何处理？

【解决方案2】：

如果您对每个按钮使用相同的类而不是 id，我的建议是

$("body").on("click",".parentClass .currentClass",function() {
    $("#show2").append($("<div/>", {
        id: "filediv"
    }).fadeIn("slow").append($("<input/>", {
        name: "file[]",
        type: "file",
        id: "file"
    }));
 });

【讨论】：