Question

我正在尝试清除模糊中“new”类的所有输入，但由于某种原因它无法正常工作。我现在已经把头撞了三个小时了，这显然是我错过了吗？相关代码如下。

更新2

我尝试用相应的if块更换switch-case块，然后它们给出了预期的结果。这消除了当前的问题，但我发现它不是原始问题的可行答案，这就是为什么我的带有switch-case的origianl代码不起作用。

更新1

经过一些研究和实验，我发现只要不在我的switch-case块内，我就可以清除所有带有“new”类的输入。我正在测试的选择器是$（'。new'），一旦进入switch-case块，就不会产生明显的效果。

@{
    ViewBag.Title = "Viser infrastruktur";
    Layout = "~/Views/Shared/_SuperOfficeLayout.cshtml";
}

<table class="table table-striped compact hover row-border">
    <thead>
        <tr>
            <th>Produsent</th>
            <th>Modell</th>
            <th>Serienummer</th>
            <th>Firmware</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="control-group">
                    <input type="text" class="col-md-12 form-control autosave new" name="manufacturer" placeholder="Produsent" value="" />
                    <input type="hidden" class="autosave new" name="id" value="" />
                    <input type="hidden" class="autosave new" name="superOfficeCustomerId" value="@Model.SuperOfficeCustomerId" />
                </div>
            </td>
            <td>
                <div class="control-group">
                    <input type="text" class="col-md-12 form-control autosave new" name="model" placeholder="Modell" />
                </div>
            </td>
            <td>
                <div class="control-group">
                    <input type="text" class="col-md-12 form-control autosave new" name="serialNumber" placeholder="Serienummer" />
                </div>
            </td>
            <td>
                <div class="control-group">
                    <input type="text" class="col-md-12 form-control autosave new" name="firmware" placeholder="Firmware" />
                </div>
            </td>
        </tr>
        @foreach (var infrastructure in Model.Infrastructures)
        {
            <tr>
                <td>
                    <div class="control-group">
                        <input type="text" class="col-md-12 form-control autosave" name="manufacturer" placeholder="Produsent" value="@infrastructure.Manufacturer" />
                        <input type="hidden" class="autosave" name="id" value="@infrastructure.Id" />
                        <input type="hidden" class="autosave" name="superOfficeCustomerId" value="@Model.SuperOfficeCustomerId" />
                    </div>
                </td>
                <td>
                    <div class="control-group">
                        <input type="text" class="col-md-12 form-control autosave" name="model" placeholder="Modell" value="@infrastructure.Model" />
                    </div>
                </td>
                <td>
                    <div class="control-group">
                        <input type="text" class="col-md-12 form-control autosave" name="serialNumber" placeholder="Serienummer" value="@infrastructure.SerialNumber" />
                    </div>
                </td>
                <td>
                    <div class="control-group">
                        <input type="text" class="col-md-12 form-control autosave" name="firmware" placeholder="Firmware" value="@infrastructure.Firmware" />
                </div>
            </td>
        </tr>
    }
</tbody>

@section SpecializedScripts
{
    <script type="text/javascript">
        function saveSettings(element, ajaxUrl, ajaxType) {
            var fields = $(element).closest('tr').children('td').children('div').children('.autosave');
            var abort = false;

            var ajaxData = {};
            $(fields).each(function () {
                abort = ($(this).val() == '' || $(this).val() == null);
                backgroundColor = abort == true ? '#d9534f' : '#f9f598';

                $(this).css('background-color', backgroundColor).css('color', '#ffffff').stop().animate({ 'background-color': '#ffffff', 'color': '#000000' }, 1500);

                ajaxData[$(this).prop('name')] = $(this).val();
            });

            if (abort == true) {
                return false;
            }

            $.ajax({
                url: ajaxUrl,
                type: ajaxType,
                data: ajaxData
            }).success(function (data, textStatus, jqXHR) {
                $(fields).each(function() {
                    $(this).css('background-color', '#5cb85c').css('color', '#ffffff').stop().animate({ 'background-color': '#ffffff', 'color': '#000000' }, 1500);
                });

                switch(data.status)
                {
                    case 'Deleted':
                        $(element).closest('tr').remove();
                    break;
                    case 'Added':
                        var tableBody = $('tbody');
                        var html = '<tr>';
                        for (var field in data.result) {
                            if (field == 'id' || field == 'superOfficeCustomerId')
                            {
                                html += '<input type="hidden" class="autosave" name="' + field + '" value="' + data.result[field] + '" />';
                            }
                            else {
                                html += '<td>'
                                        + '<div class="control-group">'
                                            + '<input type="text" class="col-md-12 autosave form-control" name="' + field + '" value="' + data.result[field] + '" />'
                                        + '</div>'
                                    + '</td>';

                                $('input.new[name=' + field + ']').val('');
                            }
                        }
                        html += '</tr>';
                        $(tableBody).append(html);
                    case 'Modified':
                        $(fields).each(function () {
                            $(this).val(data.result[$(this).prop('name')]);
                        });
                    break;
                }
            }).fail(function () {
            });
        }

        $(document).on('blur', 'input.autosave', function () {
            saveSettings($(this), '/Link/SaveInfrastructure', 'POST');
        });

        $(document).on('change', 'input.new', function () {
        });
    </script>
}

Answer 1

这样的事情应该有效：

$('input.new').on('blur', function() { $(this).val(''); $(this).text(''); });

在绑定事件时确保输入存在，否则你可以这样做：

$(document).on('blur', 'input.new', function() { $(this).val(''); $(this).text(''); });

Answer 2

对于普通 JavaScript，您可以使用

  const [loading, setLoading] = useState(true);
  const [journeys, setJourneys] = useState([]);
  const [hasLaterDepartures, setHasLaterDepartures] = useState(true);

  const getJourneys = async (date, journeys) => {
    setLoading(true);
    setHasLaterDepartures(true);
    const selectedDateJourneys = await fetchJourney(date); // Fetch that returns 0-3 journeys
    if (condition1) setHasLaterDepartures(false); // trying to update unmounted component

    if (condition2) {
      if (condition3) {
        setJourneys(something1); // trying to update unmounted component
      } else {
        setJourneys(something2) // trying to update unmounted component
      }
    } else {
      setJourneys(something3); // trying to update unmounted component
    }
  };


  // useEffects for continous loading of journeys.
  useEffect(() => {
    if (!hasLaterDepartures) setLoading(false);
  }, [hasLaterDepartures]);

  useEffect(() => {
    if (hasLaterDepartures && journeys.length > 0) {
      const latestStart = ... // just a date
      if (latestStart.addMinutes(5).isSameDay(latestStart)) {
        getJourneys(latestStart.addMinutes(5), journeys);
      } else {
        setLoading(false);
      }
    }
  }, [journeys]);

清除模糊处的输入字段

2 个答案: