Question

对于我和其他研究过它的开发人员来说，这是一个真正的谜。我有一个jQuery函数，并且在该函数中有一个if语句。条件为true时，我要在语句主体中执行某些代码，但条件为false时，则不执行。很简单但是，即使条件为假，主体中的代码也会被执行。条件中的变量称为delayExists（在函数外部）。我在函数内使用变量（称为测试）进行了测试，并“强制”条件为真-仅在这种情况下，if语句才能正常工作。我已经使用Chrome Developer工具逐步检查了代码，可以看到delayExists何时变为true，但条件似乎被忽略了。我试图在下面包括相关代码。请让我知道我需要提供更多信息。

<!-- at model specifies the type of object the view expects -->
@model atdaem
<div class="tab-pane" id="tab_delays">
    <div class="row">
        <div class="col-xs-12">
            @(Html.Kendo().Grid<atdlm>().Name("delays-grid").Columns(columns =>
              {
                  columns.Bound(c => c.Id).HeaderTemplate(" ").Width(1).ClientTemplate("<span style=\"white-space:nowrap;\">" + "<button type=\"button\" class=\"btn btn-social-icon btn-linkedin\" " + "data-toggle=\"modal\" data-target=\"\\#delayAddModal\" data-guid=\"#=Id#\" data-name=\"#=LocationName#\" " +

                                                                                       "data-title=\"Edit Delay\" >" + "<i class=\"fa fa-edit\"></i></button>" + "</span>");
                  ;
              }).DataSource(dataSource => dataSource
                                              .Ajax()
                                              .Read(read => read.Type(HttpVerbs.Post)
                                                                .Action("ActualDelayList", "TrainActivity")
                                                                .Data("actualJobTaskId")))
              .Events(events => events.DataBound("delaysDatabound")))
            <div class="pull-right top-buffer">
                <button type="button" class="btn bg-green" data-toggle="modal"
                        data-title="Add Delay"
                        data-target="#delayAddModal">
                    <i class="fa fa-plus-square"></i>
                    Add delay
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="delayAddModal" tabindex="-1" role="dialog" aria-labelledby="delayAddLabel">
    <div class="modal-dialog" role="document">
        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <!-- This "x" button is for dismissing the modal -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="delayAddLabel">Add Delay</h4>
            </div>
            <div class="modal-body">
<form name="delay-form" id="delay-form">
    @Html.HiddenFor(m => m.atdId, new { id = "atdId" })

    @Html.HiddenFor(m => m.ajtId)

    @*Original:*@
    <div class="form-group">
        <!-- Renders floating text ("Subdivision") above the select options -->
        @Html.LabelFor(m => m.SubdivisionId, new { @class = "field-label always-visible" })

        <!-- ID for select element -->
        <!-- Renders select class="select" id="SubdivisionId" name="SubdivisionId"><option value="4429faa8-5ad4-4adf-adde-ec7cf88ed9e9" innerHTML "Caltrain"-->
        @Html.DropDownListFor(m => m.SubdivisionId, Model.AvailableSubdivisions, new { @class = "select" })
        @Html.ValidationMessageFor(m => m.SubdivisionId)
    </div>

    <div class="row">
        <!--Start milepost -->
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(m => m.StartMilepost, new { @class = "field-label" })
                @Html.TextBoxFor(m => m.StartMilepost, new { @class = "form-control", placeholder = Html.DisplayNameFor(m => m.StartMilepost) })
                @Html.ValidationMessageFor(m => m.StartMilepost)
            </div>
        </div>
        <!-- End milepost -->
        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(m => m.EndMilepost, new { @class = "field-label" })
                @Html.TextBoxFor(m => m.EndMilepost, new { @class = "form-control", placeholder = Html.DisplayNameFor(m => m.EndMilepost) })
                @Html.ValidationMessageFor(m => m.EndMilepost)
            </div>
        </div>
    </div>
    <!-- Location -->
    <div class="form-group">
        @Html.LabelFor(m => m.LocationId, new { @class = "field-label always-visible" })
        <select id="LocationId" name="LocationId" class="select">
            @foreach (var loc in Model.AvailableLocations)
            {
                <option value="@loc.Id" data-milepost="@loc.Milepost">@loc.Name</option>
            }
        </select>

        @Html.ValidationMessageFor(m => m.LocationId)
    </div>


</form>
</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <!-- call to js function-->
                <button id="delayAddButton" type="button" class="btn btn-primary" data-title="Add Delay">Add Delay</button>
            </div>
        </div>
    </div>
</div>

<script>

var delayExists = false;

    //the jquery function is listening for the element with the id #delayAddModal (which is also used for delayEdit); when that modal is shown (by someone clicking
    // on the Add Delay button which has a data-target that points to the modal), just before the modal appears this fuction executes)
    $("#delayAddModal")
        .on("show.bs.modal",
            function(event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var modal = $(this);
                var title = button.data('title'); // get New title from data-title attribute
                var delId = button.data("guid");
                var name = button.data("name");

                var conditionalVariable = 1;

                var updateButtonValue = "Save Edit";


                modal.find('.modal-title').text(title); // set title to New title
                modal.find('#delayAddButton').text(updateButtonValue); // set button value to Edit Delay


                $.ajax({
                    type: "GET",
                    url: "/TrainActivity/GetDelayDataForEditing/" + "?delayId=" + delId,
                    dataType: 'json',
                    success: function(data) {

                        delayExists = true;
                        modal.find('');

                        var sub = data.SubdivisionId;

                        $.getJSON('/TrainActivity/LocationBySubdivisionList?id=' + sub,
                            function(locs) {

                                // the stuff that needs to happen before the parent ajax completes needs to go in here
                                $('select#SubdivisionId').val(data.SubdivisionId).trigger('change');


                                $('#StartMilepost').val(data.StartMilepost);
                                $('#EndMilepost').val(data.EndMilepost);
                                $('#LocationId').val(data.LocationId).trigger('change');
                                //$('select#LocationId').val(data.LocationId).trigger('change');
                            });

                    },
                    error: function() { alert("error in Delay Edit"); }
                });


            });

    //matches location based on input in Start Milepost
    $(document)
        .ready(function() {
            var test = true;
            //matches location based on input in Start Milepost
            var button = $(event.relatedTarget); // Button that triggered the modal
            var delId = button.data("guid");
            if (test == false) {
            //if (delayExists == false) {
                $("#StartMilepost").change(function() {
                    $("#EndMilepost").val($(this).val());
                    //nearestMilepost();

                });
            }
            @*function nearestMilepost()
            {
                //var mile = parseFloat($(this).val());
                var mile = $("#@Html.IdFor(m => m.StartMilepost)").val();
                var sub = ($("#SubdivisionId").val());

                var locationId = $('#LocationId option').filter(function () {
                    return parseFloat($(this).data('milepost')) >= mile
                }).val();

                $("#LocationId").val(locationId).change();
            }



        });
            //changing the subdivision changes the locations available in the location box
            @*$("#SubdivisionId").change(function () {
                var sub = $(this).val();

                $.getJSON('@Url.Action("LocationBySubdivisionList", "TrainActivity")?id=' + sub,
                    function (locs) {
                        var list = $('#@Html.IdFor(model => model.LocationId)');
                        list.find('option').remove();
                        $(locs).each(function (index, loc) {
                            list.append('<option value="' + loc.Id + '" data-milepost="'+ loc.Milepost+'">' + loc.Name + '</option>');
                        });
                        nearestMilepost();
                    });

            });*@
        });
</script>

Answer 1

误解在这里：

if (delayExists == false) {
  $("#StartMilepost").change(function() {
    $("#EndMilepost").val($(this).val());
    // etc.
  });
}

该检查在启动时一次发生。 delayExists是假的吗？是（在启动时），因此我们添加了该处理程序。它将始终运行其中的所有代码。

如果您希望每次#StartMilepost更改时都检查标志，则需要执行以下操作：

$("#StartMilepost").change(function() {
  if (delayExists == false) {
    $("#EndMilepost").val($(this).val());
    // etc.
  }
});

即使条件为假，jQuery函数也会触发

1 个答案: