Javascript结合关于模糊，两者如果个'和'他人'进行的

https://stackoverflow.com/questions/4027034

26-09-2019
|

题

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虚假的、模糊的，不是空白的,Eval真的-如果我重复这个过程中，发生我提醒双每次(两者的增加和删除)，但保持同样的顺序(如果在集)。

我认为这个问题是多方面的价值，重新宣言的变量 attr_val 在DOM，但我不是很确定如何修改我的脚本以缓解这一问题。

解决方案

它不。这是不可能的。

因此，有一些可能的原因，它可能似乎如此：

代码实际运行不会看起来像的。它可能是一个旧的版本，是缓存，或者你正在寻找错误的文件。
代码运行超过一次，这种方式执行分支机构可以运行。(虽然我真的不能看到的任何可能性，在这里.)
你是误解的结果，不管你看到导致的结论是，两个分支机构必须执行，事实上是由其他一些代码。

你可以使用一个调试器组断点的代码。设置一个断点之前的状况，和一个在每个分支。然后你会看到，如果代码跑两次，一次，或根本没有。

编辑：

警报你加入的代码显示，该事件实际上是所谓的两次，第一次值不是什么你认为他们是。

添加一些代码，试图找出在哪里的事件被援引。捕的事件的对象，增加它的功能签署： .blur(function(e) {.然后你就可以使用电子.当前的目标得到的元素引发的事件，以及显示某些属性，从它的(像是身份证)，以识别。

编辑2:

我是珍关于这一行：

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

你创建的变量 product_calendar 地方，或者有没有你的意思是:

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

编辑3:

看到完整的代码，导致双执行是明确的。你正在增加，甚至处理程序内部的一个事件处理程序，这意味着另一个处理程序加入的每一个时间。

的原因 attr_val 不能正常工作是因为它的创建为一个地方变量的一个函数，然后unsed在另一个功能。

添加模糊处理程序开始而不是的，他们只发生一次。声明变量之外的功能。

一些注意事项：

你可以使用 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);
    }
  });

});

其他提示

好吧,我想我了解这个问题。

每次你做的一个重点 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);
        });
    });

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow