javascript - 项目未从输入更改函数内的数组中删除

Question

下面是我的 HTML 代码

<div id="createCaseImgContainer">
  <div id="createCaseImgUploadBtn">+</div>
</div>

<div id="createCaseImgFileInputContainer">
  <input type="file" name="createCaseImg1" id="0" class="createCaseImgInput" accept="image/*" />
  <input type="file" name="createCaseImg2" id="1" class="createCaseImgInput" accept="image/*" />
  <input type="file" name="createCaseImg3" id="2" class="createCaseImgInput" accept="image/*" />
  <input type="file" name="createCaseImg4" id="3" class="createCaseImgInput" accept="image/*" />
</div>

这是jquery

$(document).ready(function() {

    var inputs = $('.createCaseImgInput');
    var $availableInputs = [0, 1, 2, 3];
    var randomAvailableInputs = $availableInputs[Math.floor(Math.random()*$availableInputs.length)];

    $(document).on('click', '#createCaseImgUploadBtn', function() {
        $("#"+randomAvailableInputs).trigger('click');
    });

    inputs.on('change', function() {

        triggeredInputNumber = $(this).attr('id');
        removeInputNumber = parseInt(triggeredInputNumber);

        $availableInputs = $availableInputs.splice($availableInputs.indexOf(removeInputNumber), 1);

        console.log(removeInputNumber );
        console.log($availableInputs);


    });

});

我已经为可用输入字段创建了一个与 ID 链接的数字列表，单击 createCaseImgUploadBtn 后，它会触发列表中的任何随机输入，在选择文件后我想从 availableInputs 中删除数字，但它不起作用。基本上重点是我不希望它在选择文件后再次触发相同的文件输入字段。

标签： javascriptjquery

Answer 1

问题是您使用拼接重新分配。不需要那个。只需使用拼接。Splice 改变数组的内容

Array.splice()

其次，您在randomAvailableInputs上初始化值document.ready。每次单击按钮时，该值都将保持不变。

您需要randomAvailableInputs在单击按钮时为其赋值，以便值根据$availableInputs数组而变化。

检查下面

$(document).ready(function() {

  var inputs = $('.createCaseImgInput');
  var $availableInputs = [0, 1, 2, 3];



  $(document).on('click', '#createCaseImgUploadBtn', function() {
    // move this here
    var randomAvailableInputs = $availableInputs[Math.floor(Math.random() * $availableInputs.length)];
    $("#" + randomAvailableInputs).trigger('click');
  });

  inputs.on('change', function() {

    triggeredInputNumber = $(this).attr('id');
    removeInputNumber = parseInt(triggeredInputNumber);

    $availableInputs.splice($availableInputs.indexOf(removeInputNumber), 1);

    console.log(removeInputNumber);
    console.log($availableInputs);


  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="createCaseImgContainer">
  <div id="createCaseImgUploadBtn">CLICK ME</div>
</div>

<div id="createCaseImgFileInputContainer">
  <input type="file" name="createCaseImg1" id="0" class="createCaseImgInput" accept="image/*" />
  <input type="file" name="createCaseImg2" id="1" class="createCaseImgInput" accept="image/*" />
  <input type="file" name="createCaseImg3" id="2" class="createCaseImgInput" accept="image/*" />
  <input type="file" name="createCaseImg4" id="3" class="createCaseImgInput" accept="image/*" />
</div>