Question

HTML

<!-- Contents of div #1 -->
<form id="6hgj3y537y2biacb">
    <label for="product_calendar" class="entry_label">Calendar</label>
    <input type="text" name="product_calendar" class="entry" value="" />
</form>
<form id="pyc2w1fs47mbojez">
    <label for="product_calendar" class="entry_label">Calendar</label>
    <input type="text" name="product_calendar" class="entry" value="" />
</form>
<form id="kcmyeng53wvv29pa">
    <label for="product_calendar" class="entry_label">Calendar</label>
    <input type="text" name="product_calendar" class="entry" value="" />
</form>

<!-- Contents of div #2 -->
<div id="calendar_addRemove"> <!-- CSS >> display: none; -->
    <div id="calendar_add">
        <label for="calendar_add" class="calendar_addLabel">Add Occurrence</label>
        <input type="text" name="calendar_add" class="calendar_addInput" value=""/>
    </div>
    <div id="calendar_remove">
        <label for="calendar_remove" class="calendar_removeLabel">Remove Occurrence</label>
        <input type="text" name="calendar_remove" class="calendar_removeInput" value=""/>
    </div>
</div>

的Javascript

// Complete behavioral script
$(function() {
    $('input[name=product_calendar]').css({ 'color': '#5fd27d', 'cursor': 'pointer' }).attr({ 'readonly': 'readonly' }); // Additional formatting for specified fields
    $('input[name=product_calendar]').focus(function() { // Focus on any 'input[name=product_calendar]' executes function
        var product_calendar = $(this); // Explicit declaration
        var attr_val = $(product_calendar).attr('value');
        $('#calendar_addRemove input').attr({ 'value': '' }); // Clear input fields
        $('#calendar_addRemove').fadeIn(500, function() { // Display input fields
            $('input[name=calendar_add]').blur(function() { // After value entered, action occurs on blur
                alert('Blur'); // Added for testing
                var add_val = $('input[name=calendar_add]').attr('value');
                if (add_val != '') {
                    alert('Not Blank'); // Added for testing
                    var newAdd_val = attr_val + ' ' + add_val;
                    $(product_calendar).attr({ 'value': newAdd_val });
                    $('#calendar_addRemove').fadeOut(500);
                    }
                else {
                    alert('Blank'); // Added for testing
                    $('#calendar_addRemove').fadeOut(500);
                    }
                });
            $('input[name=calendar_remove]').blur(function() { // After value entered, action occurs on blur
                alert('Blur'); // Added for testing
                var remove_val = $(this).attr('value');
                if (remove_val != '') {
                    alert('Not Blank'); // Added for testing
                    if (attr_val.indexOf(remove_val) != -1) {
                        alert('Eval True'); // Added for testing
                        var newRemove_val = attr_val.replace(remove_val, '');
                        $(product_calendar).attr({ 'value': newRemove_val });
                        $('#calendar_addRemove').fadeOut(500);
                        }
                    else {
                        alert('Eval False'); // Added for testing
                        $('#calendar_remove').append('<p class="error">Occurrence Not Found</p>');
                        $('.error').fadeOut(1500, function() { $(this).remove(); });
                        }
                    }
                else {
                    alert('Blank'); // Added for testing
                    $('#calendar_addRemove').fadeOut(500);
                    }
                });
            });
        });
    });

我添加了一些提醒以查看此脚本执行的订单。当我将1234输入input[name=calendar_add]并模糊时，警报会按预期显示。然后，当我继续并1234进入input[name=calendar_remove]并模糊时，此脚本按以下顺序抛出警报：模糊，非空白，Eval False，模糊，非空白，Eval True - 如果我重复在这个过程中，我的警报的出现每次都会加倍（包括添加和删除），但保持相同的顺序（就像在集合中一样）。

我认为问题是DOM中变量attr_val的多值重新声明，但我不太清楚如何修改我的脚本来缓解这个问题。

Answer 1

没有。这是不可能的。

所以，有一些可能的原因可能看起来如此：

实际运行的代码看起来不像那样。它可能是缓存的旧版本，或者您查找的文件错误。
代码运行不止一次，这样两个执行分支都可以运行。（虽然我在这里看不到任何可能性。）
你误解了结果，无论你看到什么导致两个分支都必须被执行的结论，实际上是由其他一些代码引起的。

您可以使用调试器在代码中设置断点。在条件之前设置一个断点，在每个分支中设置一个断点。然后，您将看到代码是否运行两次，一次或根本不运行。

编辑：

您添加到代码中的警报显示事件实际上被调用了两次，并且第一次这些值不是您认为的那样。

添加一些代码以尝试找出调用事件的位置。通过将事件对象添加到函数签名中来捕获它：.blur(function(e) {。然后你可以使用e.currentTarget来获取触发事件的元素，并从中显示一些属性（比如它的id）以识别它。

编辑2：

我对这条线很好奇：

$(product_calendar).attr({ value: newRemove_val });

你是在某个地方创建变量product_calendar，还是你的意思是：

$('input[name=product_calendar}').attr({ value: newRemove_val });

编辑3：

看到完整的代码，双重执行的原因很明显。您正在事件处理程序中添加偶数处理程序，这意味着每次都会添加另一个处理程序。

attr_val无法正常工作的原因是因为它在一个函数中创建为局部变量，然后在另一个函数中使用。

从start开始添加模糊处理程序，它们只出现一次。在函数外部声明变量。

一些注意事项：

您可以使用val功能，而不是使用value功能访问attr属性。
当您将$(this)分配给product_calendar时，它是一个jQuery对象。您不必使用$(product_calendar)。
删除与完整值不匹配，因此您可以添加12和2，然后删除2，然后您将1和2

（这是一个虚拟文本，因为列表后面没有代码块...）

// Complete behavioral script
$(function() {

  // declare variables in outer scope
  var attr_val;
  var product_calendar;

  $('input[name=product_calendar]')
    .css({ 'color': '#5fd27d', 'cursor': 'pointer' })
    .attr('readonly', 'readonly') // Additional formatting for specified fields
    .focus(function() { // Focus on any 'input[name=product_calendar]' executes function
      product_calendar = $(this); // Explicit declaration
      attr_val = product_calendar.val();
      $('#calendar_addRemove input').val(''); // Clear input fields
      $('#calendar_addRemove').fadeIn(500); // Display input fields
    });

  $('input[name=calendar_add]').blur(function() { // After value entered, action occurs on blur
    var add_val = $(this).val();
    if (add_val != '') {
      product_calendar.val(attr_val + ' ' + add_val);
    }
    $('#calendar_addRemove').fadeOut(500);
  });

  $('input[name=calendar_remove]').blur(function() { // After value entered, action occurs on blur
    var remove_val = $(this).val();
    if (remove_val != '') {
      if (attr_val.indexOf(remove_val) != -1) {
        product_calendar.val(attr_val.replace(remove_val, ''));
        $('#calendar_addRemove').fadeOut(500);
      } else {
        $('#calendar_remove').append('<p class="error">Occurrence Not Found</p>');
        $('.error').fadeOut(1500, function() { $(this).remove(); });
      }
    } else {
      $('#calendar_addRemove').fadeOut(500);
    }
  });

});

Answer 2

好的，我想我现在明白了这个问题。

每次关注product_calendar元素时，都会在fadeIn元素上执行#calendar_addRemove。每次执行fadeIn时，都会使用其回调将新模糊处理程序绑定到calendar_add和calendar_remove元素。这意味着随着时间的推移，这些元素将具有多个模糊处理程序（都执行相同的逻辑。）这可能不是您想要的。

在下面的脚本中，我已经拉出了嵌套的处理程序，以便它们只绑定到每个元素一次。请注意：

product_calendar在匿名函数的顶部声明（作为null），然后由product_calendar元素上的焦点处理程序更新。我认为这会导致正确的行为。
attr_val在两个模糊处理程序中声明并分配在本地。再一次，我认为这会导致正确的行为：如果您要声明模糊处理程序的之外（声明product_calendar），那么您可能会访问时会意外使用旧值。

我仍然不确定这段代码应该如何运作，但是这个脚本以我认为“合理”的方式执行。

（顺便说一下，生产代码应该允许输入字符串的开头和结尾有空格。）

    $(function() {
    var product_calendar = null;

    $('input[name=product_calendar]').css({ 'color': '#5fd27d', 'cursor': 'pointer' }).attr({ 'readonly': 'readonly' }); // Additional formatting for specified fields

    $('input[name=calendar_add]').blur(function() { // After value entered, action occurs on blur
        alert('Blur'); // Added for testing
        var add_val = $('input[name=calendar_add]').attr('value');
        if (add_val != '') {
            alert('Not Blank'); // Added for testing
            var attr_val = $(product_calendar).attr('value');
            var newAdd_val = attr_val + ' ' + add_val;
            $(product_calendar).attr({ 'value': newAdd_val });
            $('#calendar_addRemove').fadeOut(500);
        }
        else {
            alert('Blank'); // Added for testing
            $('#calendar_addRemove').fadeOut(500);
        }
    });

    $('input[name=calendar_remove]').blur(function() { // After value entered, action occurs on blur
        alert('Blur'); // Added for testing
        var remove_val = $(this).attr('value');
        if (remove_val != '') {
            alert('Not Blank'); // Added for testing
            var attr_val = $(product_calendar).attr('value');
            if (attr_val.indexOf(remove_val) != -1) {
                alert('Eval True'); // Added for testing
                var newRemove_val = attr_val.replace(remove_val, '');
                $(product_calendar).attr({ 'value': newRemove_val });
                $('#calendar_addRemove').fadeOut(500);
            }
            else {
                alert('Eval False'); // Added for testing
                $('#calendar_remove').after('<p class="error">Occurrence Not Found</p>');
                $('.error').fadeOut(1500, function() { $(this).remove(); });
            }
        }
        else {
            alert('Blank'); // Added for testing
            $('#calendar_addRemove').fadeOut(500);
        }
    });

    $('input[name=product_calendar]').focus(function() { // Focus on any 'input[name=product_calendar]' executes function
        product_calendar = $(this);
        $('#calendar_addRemove input').attr({ 'value': '' }); // Clear input fields
        $('#calendar_addRemove').fadeIn(500);
        });
    });

Javascript Bind on Blur，两者'if indexOf'和'else'执行

2 个答案:

编辑：

编辑2：

编辑3：