Javascript 绑定(bind)模糊，执行 'if indexOf' 和 'else'

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);
                    }
                });
            });
        });
    });

我添加了一些警报来查看此脚本的执行顺序。当我在 input[name=calendar_add] 中输入 1234 并模糊时，警报按预期出现。然后，当我继续在 input[name=calendar_remove] 中输入 1234 并模糊时，该脚本会按以下顺序发出警报:Blur、Not Blank、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 无法正常工作的原因是它在一个函数中作为局部变量创建，然后在另一个函数中取消使用。

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

一些注意事项:

• 您可以使用 val 函数，而不是使用 attr 函数访问 value 属性。
• 当您将 $(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);
    }
  });

});