javascript - 如何选择正确的 'this' 选择器？

Question

JSFIDDLE:http://jsfiddle.net/nqsfoqzz/10/

我无法弄清楚下面代码中的 this 选择器是什么。如果我调用函数 removeAndClose(elem);如点击事件结束附近所示(当前已注释掉)，$(this) 的值是正确的，即 .removeleg。但是我需要根据弹出窗口中的点击事件来控制removeAndClose() 函数，这就是点击事件中$noticeMessage 的原因，以及函数noticePopup() 的原因。我已将 removeAndClose(elem) 添加到 Confirm 按钮，这是出现 this 问题的地方。

由于我在 $noticeMessage 中使用 removeAndClose() 函数，elem 未定义。

我整理了一个显示问题的 jsfiddle:http://jsfiddle.net/nqsfoqzz/10/要查看 CONFIRM 按钮，请先单击“ADD LEG”按钮。然后从新添加的元素中单击“删除腿”。然后您应该会看到弹出窗口以确认或取消删除。

主点击事件:

    $('.missionlegswrapper').on('click', '.removeleg', function(e){
        e.preventDefault();

        var elem = $(this);

        // Notice Message
        $noticeMessage = 
                '<div>' + 
                    '<div>Are you sure you want to remove this leg? All the information you\'ve entered will be lost.</div>' + 
                    '<div>' + 
                        '<a href="javascript:void(0);" class="button confirm green" onClick="removeAndClose(elem);">Confirm</a>' + 
                        '<a href="javascript:void(0);" class="button cancel red" onClick="closePopup();">Cancel</a>' + 
                    '</div>' + 

                    '<div class="clear"></div>' + 
                '</div>';

        // Notice Popup
        noticePopup('error',$noticeMessage);

        //removeAndClose(elem);
    });

附加功能:

    /**
      * Notice Popup Function
      * messageType: The message to be entered into the popup
      * message: error, notice, warning (services as class name identifier)
      */
    function noticePopup(messagetype,message){

        // Append Backdrop to Body
        $('body').append('<div class="noticepopupbackdrop"></div>');

        // Append Popup to Body
        $('body').append(
            '<div class="noticepopup ' + messagetype + '">' + 
                '<div class="noticepopup_outer">' + 
                    '<div class="noticepopup_inner">' + 
                        '<div class="noticepopup_header">' + 
                            '<span>Attention</span>' + 
                            '<div class="noticeclosebttn"></div>' + 
                        '</div>' + 
                        '<div class="noticepopup_content">' + 
                            '<div class="noticepopupcontent_inner">' + 

                                message + 

                                '<div class="clear"></div>' + 
                            '</div>' + 

                            '<div class="clear"></div>' + 
                        '</div>' + 

                        '<div class="clear"></div>' + 
                    '</div>' + 

                    '<div class="clear"></div>' + 
                '</div>' + 

                '<div class="clear"></div>' + 
            '</div>'
        );

        // Initial Open
        $('div.noticepopupbackdrop').fadeIn(150);
        $('div.noticepopup').css({display: 'block'}).animate({top: '50%', opacity: '1.00'}, 300);

        // Grab Width and Height and Center Popup on Page Load
        popupWidthHeight();

        // On Resize
        $(window).on('resize', function(){

            // Grab Width and Height and Center Popup on Resize
            popupWidthHeight();
        });

        // On Click Close
        $('div.noticepopupbackdrop,div.noticeclosebttn').on('click', function(){
            closePopup();
        });
    }


    /**
      * Close Popup Function
      */
    function closePopup(){
        $('div.noticepopup').fadeOut(150);
        $('div.noticepopupbackdrop').fadeOut(175);

        setTimeout(function(){
            $('div.noticepopupbackdrop,div.noticepopup').remove();
        }, 350);
    }


    /**
      * Get Notice Popup Width and Height Function
      */
    function popupWidthHeight(){

        var noticeWidth = $('div.noticepopup').width();
        var noticeHeight = $('div.noticepopup').height();

        $('div.noticepopup').css({marginTop: -(noticeHeight / 2), marginLeft: -(noticeWidth / 2) });
    }


    /**
      * Close Popup Notice and Remove Mission Leg
      */
    function removeAndClose(thisObj){
        thisObj.closest('.missionlegitem').remove();

        console.log(thisObj);

        // Close Popup
        var popupCloseTime = setTimeout(function(){
            closePopup();
        },25);
    }

Answer 1

下面的代码可以变得更加漂亮和抽象，但本质上您可以将 HTML 设计与功能行为和类似于下面的代码分开。

我只是将 HTML 与功能代码分开了一点，但可以自由地进行进一步的改进以提高可重用性。

您的 Mission Leg Wrapper 点击事件代码可能会更改为:

// Data Entry Form Remove Leg
$('.missionlegswrapper').on('click', '.removeleg', function(e){
    e.preventDefault();

    var elem = $(this);

    // Notice Message
    // Removed in-line click events
    // Added identifiers through use of data-id to each link
    $noticeMessage = 
        '<div>' + 
        '<div>Are you sure you want to remove this leg? All the information you\'ve entered will be lost.</div>' + 
        '<div>' + 
        '<a data-id="notice-message-confirm" href="javascript:void(0);" class="button confirm green">Confirm</a>' + 
        '<a data-id="notice-message-cancel" href="javascript:void(0);" class="button cancel red">Cancel</a>' + 
        '</div>' + 

        '<div class="clear"></div>' + 
        '</div>';

    // Add click event handlers in JavaScript instead
    // Assigning the "this" context through the use of "bind"
    $(document).on('click', '[data-id="notice-message-confirm"]', removeAndClose.bind(this));
    $(document).on('click', '[data-id="notice-message-cancel"]', closePopup);

    // Notice Popup
    noticePopup('error',$noticeMessage);

    //removeAndClose(elem);
});

由于 bind(this)，您的 removeAndClose() 方法现在位于单击链接的上下文中

/**
  * Close Popup Notice and Remove Mission Leg
  */
function removeAndClose(){
    console.log(this);
    $(this).closest('.missionlegitem').remove();

    // Close Popup
    var popupCloseTime = setTimeout(function(){
        closePopup();
    },25);
}

---

参见工作示例 here

---

上面的代码仍然“困惑”，您可以将每个通知包装在它自己的对象中，每个通知都管理它自己的事件处理等。