0

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、Blur、Not Blank、Eval True - 如果我重复此过程，我的警报的出现次数会每增加一倍时间（添加和删除），但保持相同的顺序（就像在集合中一样）。

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

4

2 回答 2

4

它没有。这是不可能的。

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

  • 实际运行的代码看起来不像那样。它可能是缓存的旧版本，或者您正在查找错误的文件。

  • 代码运行不止一次，这样两个执行分支都可以运行。（虽然我在这里看不到任何可能性。）

  • 您误解了结果，无论您看到什么导致必须执行两个分支的结论，实际上都是由其他一些代码引起的。

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

编辑：

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

添加一些代码以尝试找出调用事件的位置。通过将事件对象添加到函数签名中来捕获它：.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是因为它在一个函数中创建为局部变量，然后在另一个函数中取消。

而是从开始添加模糊处理程序，它们只发生一次。在函数外声明变量。

一些注意事项：

  • 您可以使用该val函数而不是使用该函数访问value属性attr。
  • 当您分配$(this)给 时product_calendar，它是一个 jQuery 对象。您不必使用$(product_calendar).
  • 删除与完整值不匹配，因此您可以添加12and 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);
    }
  });

});
于 2010-10-26T19:20:39.623 回答
1

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

每次你关注product_calendar元素时，你都会fadeIn对元素进行一次关注#calendar_addRemove。每次执行此操作时fadeIn，您都使用它的回调将新的模糊处理程序绑定到calendar_addandcalendar_remove元素。这意味着随着时间的推移，这些元素将有多个模糊处理程序（都执行相同的逻辑）。这不可能是你想要的。

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

  • product_calendar在匿名函数的顶部声明（as 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);
        });
    });
于 2010-10-27T03:55:41.963 回答