Javascript 单击特定的div'；将单击s id，并将div的标题替换为上载文件的标题

我有3个类名为“上传”的div。每个上载类都用于输入文件。我必须隐藏“输入文件”按钮并使用我的自定义按钮。但现在单击“浏览6个文件上载”。如何仅为单击的div获取文件上载选项？？？？以及如何用我选择上载的文件的标题更改单击的div的标题

        <div class="col-md-4 atm">
        <div class="photo" style="background: none">
            <?php echo $this->Html->image('/students_tmp_design/images/file-upload.png', array('alt' => '', 'id' => 'photoStyle'));?>
        </div><!--End of photo-->
        <div class="upload" id="yourBtn">UPLOAD FORWARDING LETTER</div>
                <div class="hiddenBtn">
                    <?php echo $this->Form->file('letter', array('id' => 'upfile', 'onchange'=>'sub(this)')); ?>
                </div>
        </div>
        <div class="col-md-4 atm">
        <div class="photo" style="background: none">
            <?php echo $this->Html->image('/students_tmp_design/images/file-upload.png', array('alt' => '', 'id' => 'photoStyle',));?>
        </div><!--End of photo-->
        <div class="upload" id="yourBtn">UPLOAD NEWSPAPER CIRCULAR</div>
                <div class="hiddenBtn">
                    <?php echo $this->Form->file('news', array('id' => 'upfile', 'onchange'=>'sub(this)')); ?>
                </div>
        </div>
        <div class="col-md-4 atm">
        <div class="photo" style="background: none">
            <?php echo $this->Html->image('/students_tmp_design/images/file-upload.png', array('alt' => '', 'id' => 'photoStyle'));?>
        </div><!--End of photo-->
        <div class="upload" id="yourBtn">UPLOAD SMC APPROVAL LETTER</div>
                <div class="hiddenBtn">
                    <?php echo $this->Form->file('smc_letter', array('id' => 'upfile', 'onchange'=>'sub(this)')); ?>
                </div>
        </div>
    </div>

$('.upload').on('click',function(){
    $('#upfile').click();
    });
function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
    }

上传转发信件
上载报纸通告
上传SMC批准函
$（'.upload'）。在（'click'，function（）上{
$（'#upfile'）。单击（）；
});
职能小组（obj）{
var file=obj.value；
var fileName=file.split（“\\”）；
document.getElementById（“yourBtn”）.innerHTML=fileName[fileName.length-1]；
document.myForm.submit（）；
event.preventDefault（）；
}

您的问题的解决方案： 这将只触发特定的div#upfile元素

$('.upload').on('click',function(){
  $(this).find('#upfile').click();// 
});

---

如果可能，为每个

div

设置

id

。然后，在事件侦听器中，您可以参考

event.target

来检查单击了哪个

div

元素

例如：

    $('.upload').on('click', function (event) {
      var divID = event.target.id;
      // some logic with ifs or a switch
      // ...
      $('#upfile').click();
    });

编辑： 好的，我会给出一个更全面的答案。我不是PHP高手，但我会这样设置：

PHP代码定义DOM元素

    <?php
      $uploadDIVs = [
        "letter" => "FORWARDING LETTER",
        "news" => "NEWSPAPER CIRCULAR",
        "sms_letter" => "SMC APPROVAL LETTER"
      ];

      foreach($uploadDIVs as $key=>$value): ?>
        <div class="col-md-4 atm">
          <div class="photo" style="background: none">
            <?php echo $this->Html->image('/students_tmp_design/images/file-upload.png', array('alt' => '', 'id' => 'photoStyle'));?>
          </div><!--End of photo-->

          <div class="upload" id=""button-".$key>UPLOAD <?php echo $value ?></div>
            <div class="hiddenBtn">
              <?php echo $this->Form->file($key, array('id' => "upfile-".$key, 'onchange'=>'sub(this)')); ?>
            </div>
          </div>
        </div>

      <?php endforeach; ?>

---

为每个div使用特定的id…。Rishab的答案会起作用，但您确实应该避免在同一页面上的多个元素上使用相同的id。在这种情况下，甚至没有理由使用相同的ID-只需给每个上传div一个单独的ID，以及每个“upfile”元素。抱歉，问题没有解决…单击所有3个上传我已经编辑了我的答案。让我知道它是否有效，但现在上传后，我需要更改上传按钮的标题，并为其提供上传文件的名称。我如何做？这是一个单独的问题。如果您需要更改

按钮

元素的文本，您可以使用

innerHTML

，即：

button.innerHTML=“new text”

。很抱歉，此功能不起作用…单击后，它将上载到所有div中。您应该为按钮使用唯一的

id

，该按钮以某种方式与div的

id

绑定，即：

upfile-div1

。这样，当单击

div

时，您可以使用

event.target.id

来单击特定按钮。这样，我必须分别为3个div编写3次jqurey代码…这将非常困难…因为我有大约10个div的上传..嗨，请更新您的代码，以便我们了解当前场景。请提供前端代码，不包括php one，让我们在聊天中继续进一步查询

    $('.upload').on('click',function(event){
      // get the clicked DIV's id
      var divClickedID = event.target.id;
      // execute the 'click()' function on the proper button
      $('#upfile-' + extractID(divClickedID)).click();
    });

    function sub(obj){
      var file = obj.value;
      var fileName = file.split("\\");
      document.getElementById("button-" + extractID(obj.id)).innerHTML = fileName[fileName.length-1];
      document.myForm.submit();
      event.preventDefault();
    }

    function extractID (elementID) {
      return elementID.substr(elementID.indexOf("-" + 1);
    }