onclick 将点击特定 div 的 id 将 div 的标题替换为上传文件的标题

Question

我有 3 个类名为“上传”的 div。每个上传类都用于输入文件。我必须隐藏输入文件按钮并使用我的自定义按钮。但是现在 onclick 浏览 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();
    }

Answer 1

如果可能，请为每个 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; ?>

控制按钮动作的 JS (jquery?) 代码

    $('.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);
    }

Answer 2

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

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