javascript - 保持活力粘性

Question

需要帮助编写可以保持事件粘性(及其内容)的代码，并且当按下 ESC 键时，只有一个事件粘性将被关闭。如何定义OpenWindow？使用 MySql 或 cookie 来保持事件状态？

实际代码:https://jsfiddle.net/venntr/14fs0fef/

    $(document).ready(function() {
  function limitTextareaLine(e) {
    if (e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) {
      return false;
    }
  }
  $(function() {
    $('textarea.limited').keydown(limitTextareaLine);
  });
  var x = "<div class='darkYellow'><span class='close ui-icon ui-icon-close'></span>Sticky<div class='lightYellow'><textarea maxlength='250' rows='8' cols='25' class='limited'></textarea></div></div>";
  $('#click').click(function() {
    $('#one').append('<div class="note">' + x + '</div>');
    $(".darkYellow").draggable();
    $('.close').each(function() {
      $('.close').click(function() {
        $(this).parent().remove();
      });
    });
  });
  $('.darkYellow').on('click', function() {
    $(this).addClass("index");
  });
  $('.darkYellow').on('blur', function() {
    $(this).removeClass("index");
  });
  $(document).keyup(function(e) {
    if (e.keyCode == 27) {
      window.open(location, '_self', '');
      openedWindow.close();
    }

  });
});

Answer 1

我对您的代码进行了一些更改，这可能有助于实现您的目标:

var arr = [];
    $(document).ready(function () {
        function limitTextareaLine(e) {
            if (e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) {
                return false;
            }
        }
        $(function() {
            $('textarea.limited').keydown(limitTextareaLine);
        });
        var x = "<div class='darkYellow'><span class='close ui-icon ui-icon-close' onclick='closeIt($(this));'></span>Sticky<div class='lightYellow'><textarea maxlength='250' rows='8' cols='25' class='limited'></textarea></div></div>";
        $('#click').click(function() {
            var count = $('.note').length + 1;
            $('.note').removeClass('active');
            $('#one').append('<div class="note '+count+' active">' + x + '</div>');
            arr.push(count);
            $(".darkYellow").draggable();
        });     
        $('body').click(function(e) {
            var target = $(e.target);
            if (target.parents('.note').length > 0) {
                $('.note').removeClass('active');
                target.parents('.note').addClass('active');
            }
            console.log(arr);
        });
        $(document).keyup(function(e) {
            if (e.keyCode == 27) {
                if ($('.note').length > 0) {
                    if ($('.note.active').length > 0) {
                        var cls = parseInt($('.note.active').attr('class').split(' ')[1]);
                        var index = arr.indexOf(cls);
                        console.log('.note.active.'+cls+' '+index);
                        arr.splice(index,1);
                        $('.note.active').remove();
                    } else {                        
                        var cls = Math.max.apply( Math, arr );
                        var index = arr.indexOf(cls);
                        arr.splice(index,1);
                        console.log('.note.'+cls+' '+index);
                        $('.note.'+cls).remove();
                    }
                }   console.log(arr)
            }
        });
    });
    function closeIt(that) {
        var cls = parseInt(that.parent().parent().attr('class').split(' ')[1]);
        var index = arr.indexOf(cls);
        console.log('.note.'+cls+' '+index);
        arr.splice(index,1);
        that.parent().parent().remove();
    }