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删除数字的文件后，它触发了列表中的任何随机输入，但是它不起作用。基本上，整个观点是，我不希望它在选择文件后再次触发相同的文件输入字段。

Answer 1

问题是您重新分配了接头。不需要那个。只需使用接头即可。拼接会更改数组的内容

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>

项未从输入更改函数内的数组中移除

1 个答案: