Question

我有一个表单，我只想让用户上传3张图片（最多），之后应该隐藏添加更多按钮，这样他们就不能上传了。当用户单击“添加更多”按钮时，将生成一个输入字段（带有删除该输入字段的链接）。

我想要发生的是以下

1）隐藏添加更多按钮nested_field_destroy_num和nested_field_num如果计数>＆gt; = 3

2）如果用户点击添加更多且计数为＆gt; = 3但点击删除字段，则会再次显示添加更多按钮

当DOM准备就绪时，我有这个工作（到某一点），但是有一些问题让它可以“实时”工作。我不知道我可以使用哪个事件处理程序来检测更改飞。

$(document).ready(function(){

    var show_add_button = function() {
        var nested_field_destroy_num = $("input[id$='__destroy']").length;
        var nested_field_num = $('.animal_file').length;

        if(nested_field_destroy_num + nested_field_num >= 3){
            $('.add_nested_fields').hide();
        } else {
            $('.add_nested_fields').show();
        }
    }
    show_add_button();
});

有人可以建议我可以在这里使用什么事件处理程序吗？或者，如果有人能帮助我用一些非常好的伪代码来解决这个问题。

更新

这是HTML结构，用户上传了2张图片

<!-- File Upload -->
<div class="fields">
 <div class="form-group has-feedback">
  <img alt="image" src="/" />
   <input id="animal_animal_images_attributes_0_image_cache" name="animal[animal_images_attributes][0][image_cache]" type="hidden" />
   <label for="animal_animal_images_attributes_0_image">Remove Image</label>
   <input name="animal[animal_images_attributes][0][_destroy]" type="hidden" value="0" /><input class="form-control" id="animal_animal_images_attributes_0__destroy" name="animal[animal_images_attributes][0][_destroy]" type="checkbox" value="1" />
 </div>

 <input id="animal_animal_images_attributes_0_id" name="animal[animal_images_attributes][0][id]" type="hidden" value="38" />
</div>

<div class="fields">
  <div class="form-group has-feedback">
    <img alt="image2" src="/" />
      <input id="animal_animal_images_attributes_1_image_cache" name="animal[animal_images_attributes][1][image_cache]" type="hidden" />
    <label for="animal_animal_images_attributes_1_image">Remove Image</label>
    <input name="animal[animal_images_attributes][1][_destroy]" type="hidden" value="0" /><input class="form-control" id="animal_animal_images_attributes_1__destroy" name="animal[animal_images_attributes][1][_destroy]" type="checkbox" value="1" />
  </div>

 <input id="animal_animal_images_attributes_1_id" name="animal[animal_images_attributes][1][id]" type="hidden" value="43" />
 </div>
 // Add Another input field
 <a class="btn btn-default btn-green add_nested_fields" data-association="animal_images" data-blueprint-id="animal_images_fields_blueprint" href="javascript:void(0)">Add Another Image</a>

<div class="centered">
  <input class="btn btn-default btn-green btn-sign-up" name="commit" type="submit" value="Update Advert" />   
</div>

Answer 1

我认为你可以绑定到点击添加按钮。

$('.add_nested_fields').click(show_add_button);

Answer 2

好的，因为我找到了一个有效的解决方案，如果我的问题不够明确，请道歉。我正在使用带有Rails的nested_form，我发现当你通过链接删除一个输入字段时，它实际上会隐藏元素，所以我不得不考虑到这一点。这就是我最终做的事情，希望它会帮助使用nested_form的其他人吗？

我还添加了一个检查以查找额外的输入字段，只是因为有人在物理上更改了添加图像按钮的css，如果为true则将完全删除最后一个。但是也会有服务器端验证，所以希望涵盖所有途径

它可能有点乱，但我正在研究如何重构这个

var show_add_button = function() {
  var nested_field_destroy_num = $("input[id$='__destroy']").length;
  var nested_field_destroy_num_hidden = $("input[id$='__destroy']:hidden").length;
  var hidden_fields = $(".fields:hidden").length;
  var nested_field_num = $('.animal_file').length;
  var total = nested_field_destroy_num + hidden_fields + nested_field_num

  if(nested_field_destroy_num + nested_field_num - hidden_fields - nested_field_destroy_num_hidden >= 3){
    $('.add_nested_fields').hide();
    console.log('hide rule applied');
  } else {
    $('.add_nested_fields').show();
    console.log('display rule applied');
  }

 if(nested_field_num >= 5){
    $('.fields:last').remove();
  }

}

$(document).on('click', '.add_nested_fields', show_add_button);
$(document).on('click', 'a.remove_nested_fields', show_add_button);

检测表单中的更改

2 个答案: