如何隐藏表单中的行，直到使用javascript单击它们为止。？

Question

我需要隐藏行，直到他们被点击为止。我最初没有编写代码，我很难解决这些问题。这是私人飞机公司的高级订单。该表单应该只有2个可见的腿，然后你就可以点击添加一个腿部按钮添加一条腿，而不是它显示15条腿。

jQuery(document).ready(function () {
    jQuery('.trip-type').change(function () {
        if (jQuery(this).val() == "multi-leg") {
            jQuery("#addleg").css("display", "block").hide().end();
            for (var i = 2; i <= 3; i++) {
                jQuery('.to_leg_' + i).val('');
                jQuery('.to_leg_' + i).attr('data-code', "");
                jQuery('.to_leg_' + i).attr('data-name', "");
                jQuery('.to_leg_' + i).attr('data-real-city', "");
                jQuery('.to_leg_' + i).attr('data-country', "");
                jQuery('.to_leg_' + i).attr('data-latitude', "");
                jQuery('.to_leg_' + i).attr('data-longitude', "");
            }
            for (var n = 3; i <= 5; i++) {
                jQuery('.from_leg_' + i).val('');
                jQuery('.from_leg_' + i).attr('data-code', "");
                jQuery('.from_leg_' + i).attr('data-name', "");
                jQuery('.from_leg_' + i).attr('data-real-city', "");
                jQuery('.from_leg_' + i).attr('data-country', "");
                jQuery('.from_leg_' + i).attr('data-latitude', "");
                jQuery('.from_leg_' + i).attr('data-longitude', "");
            }
            var allElements = jQuery('#multileg-block').find("div.row");
            for (var i = 0; n < allElements.length; i++) {
                if (jQuery(allElements[i]).hasClass("non-one-way") === true) {
                    jQuery(allElements[i]).removeClass('non-one-way');
                    jQuery(allElements[i]).removeClass(i);
                    jQuery(allElements[i]).css("display", "none");
                    jQuery(allElements[i]).attr('attribute', "");
                }
            }
            var trelements = jQuery('#multi-table').find("tbody tr.multileg-table");
            for (var i = 1; i < trelements.length; i++) {
                if (jQuery(trelements[i]).hasClass('non-one-way') === true) {
                    jQuery(trelements[i]).removeClass("non-one-way");
                    jQuery(trelements[i]).css("display", "none");
                    jQuery(trelements[i]).attr('attribute', "");
                }
            }

            $('.info-distances tbody tr.multileg-info:eq(0)').addClass('non-one-way');
        } else {
            jQuery("#addleg").css("display", "none");
            jQuery('.info-distances tbody tr:eq(1)').removeClass('non-one-way');
            var mutrelements = jQuery('.info-distances').find("tbody tr.multileg-info");
            for (var i = 1; i < mutrelements.length; i++) {
                if (jQuery(mutrelements[i]).hasClass('non-one-way') === true) {
                    jQuery(mutrelements[i]).removeClass("non-one-way");
                }
            }
        }
    });

    jQuery('#addleg').on("click", function () {
        var allElements = jQuery('#multileg-block').find("div.row");
        for (var i = 0; i < allElements.length; i++) {
            if (jQuery(allElements[i]).hasClass("non-one-way") == false) {
                jQuery(allElements[i]).addClass('non-one-way');
                jQuery(allElements[i]).addClass(i);
                jQuery(allElements[i]).css("display", "block");
                jQuery(allElements[i]).attr('attribute', i);
                break;
            }
        }
        var trelements = jQuery('#multi-table').find("tbody tr.multileg-table");

        for (var i = 0; i < trelements.length; i++) {
            if (jQuery(trelements[i]).hasClass('non-one-way') === false) {
                jQuery(trelements[i]).addClass("non-one-way");
                jQuery(trelements[i]).css("display", "table-row");
                jQuery(trelements[i]).attr('attribute', i);
                break;
            }
        }

        var mutrelements = jQuery('.info-distances').find("tbody tr.multileg-info");
        for (var i = 1; i < mutrelements.length; i++) {
            if (jQuery(mutrelements[i]).hasClass('non-one-way') === false) {
                jQuery(mutrelements[i]).addClass("non-one-way");
                break;
            }
        }


    });
    jQuery('.Leg_remove').on("click", function () {
        jQuery(this).parent().parent().css('display', 'none');
        jQuery(this).parent().parent().removeClass('non-one-way');
        index = parseInt(jQuery(this).parent().parent().attr('attribute'));
        jQuery('.non-one-way[attribute=' + index + ']').removeClass('non-one-way').css('display', 'none');
        index += 2;
        jQuery('.info-distances tbody tr:eq(' + index + ')').removeClass('non-one-way');


    });
}); < /script>