如何运行具有多个 ID 的特定函数

Question

我有一个 php 页面，其中包含 5 个 php 文件。在每个文件中，我为每个 php 文件放置了一个输入 [按钮]，当用户点击它时，该功能将被触发。由于我不允许在页面中使用相同的 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();
    }
});

Answer 1

您可以使用以 select 或 String.prototype.replace() 和 RegExp /\D/g 开头的属性来替换 id 中不是数字的部分，检索元素 id 到 select 对应的元素 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>

Answer 2

我的建议是您对每个按钮使用相同的 class 而不是 id

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

如何 运行 具有多个 ID 的特定函数

how to run a specific function with several ID's

jquery

document

如何运行具有多个 ID 的特定函数