如何编写简洁的 JS if else 语句以通过 Cocoon 动态添加嵌套的 Rails simple_form？

Question

我正在 rails 中构建一个嵌套的 simple_form_for，使用 cocoon 来动态添加和删除嵌套元素。主要模型对象是一个报价单，一个报价单有很多员工。我已经达到了业余代码技能的极限，希望获得有关编写整洁的 js 脚本的一些指导，以实现以下目标：

如果 nested_object.count <= 2 那么 remove_empee_link.hide
if nested_object.count > 2 then remove_empee_link.show，但不是前两个 nested_objects.
如果nested_object.count>10则add_empee_link.hide，否则总是add_empee_link.show

改编自@nathanvda 提供的非常有用的 post here 我已经到了这里；

$(document).ready(function() {
   function check_to_hide_or_show_add_empee_link() {
     if ($('#empee-form .nested-fields:visible').length == 5) {
       $('#empee-form .links a').hide();
     } else {
       $('#empee-form .links a').show();
     }
   }

   $('#empee-form').on('cocoon:after-insert', function() {
     check_to_hide_or_show_add_empee_link();
   });

   $('#empee-form').on('cocoon:after-remove', function() {
     check_to_hide_or_show_add_empee_link();
   });

   check_to_hide_or_show_add_empee_link();     
 });

$(document).ready(function() {
   function check_to_hide_or_show_remove_empee_link() {
     if ($('#empee-form .nested-fields:visible').length <= 2) {
       $('.remove_fields').hide();
     } else {
       $('.remove_fields').show();
     }
   }

   $('#empee-form').on('cocoon:after-insert', function() {
     check_to_hide_or_show_remove_empee_link();
   });

   $('#empee-form').on('cocoon:after-remove', function() {
     check_to_hide_or_show_add_remove_empee_link();
   });

   check_to_hide_or_show_add_remove_empee_link();     
 });

但是我正在努力制定一个策略，以解决我如何在一个简洁的解决方案中实现我在上面的 biullets 中概述的内容，在开始并玩了几个小时之后，任何指导都会非常感激。谢谢

我现在编写的更新代码，但行为是意外的；

如果页面上有 1、2 或 3 个嵌套元素，则全部 remove_links 隐藏。
如果页面上有 4 个嵌套元素，则第一个、第二个和第四个 remove_link 隐藏
如果页面上有 5 个嵌套元素，则第一个、第二个和第三个 remove_link 隐藏

预期行为，第一和第二 remove_links 始终隐藏，显示其他行为：

// Hiding the 1st 'remove employee' link for the first two employee fields.
$(document).ready(function() { 
    function hide_first_and_second_remove_empee_links() {
        var remove_links = $('.remove_fields')
        $(remove_links[0]).hide();
        $(remove_links[1]).hide();
        // $('a.remove_fields:first-child').hide();
        // $('a.remove_fields:nth-child(2)').hide();
    }
    $('#empee-form').on('cocoon:after-insert', function() {
    hide_first_and_second_remove_empee_links();
  });
  $('#empee-form').on('cocoon:before-insert', function() {
    hide_first_and_second_remove_empee_links();
  });
  hide_first_and_second_remove_empee_links();
});

怎么会这样？有一种方法，它收集所有 .remove_fields' into the remove_links var, then wraps the[0]element of that collection in a jQuery object and callshideon it. Then the same to the1element. That method is called on page ready and then again oncocoon:before-insertandafter-insert. I don't see how the definition of the[0]and the1` 元素 changes?

Answer 1

当您编写时，您的逻辑会变得更容易：

始终隐藏前两个删除 links
如果员工超过 10 人，则隐藏添加关联 link

第二个已包含在您的回答中。

第一个实际上很容易使用 jquery：

$('.remove-fields:first-child').hide()
$('.remove-fields:nth-child(2)').hide()

如何编写简洁的 JS if else 语句以通过 Cocoon 动态添加嵌套的 Rails simple_form？

How to write a neat JS if else statement to dynamically add a nested Rails simple_form via Cocoon?

javascript

nested-forms

cocoon-gem