Question

我想避免重复自己。

以下代码使用条件语句来检查元素是否存在。如果未检测到该元素，则使用.Began

插入一个唯一的代码

无论条件元素的计算结果如何，都会调用相同的事件触发器。这不是最佳的。

如何优化此代码以便不写两次？

.html()

Answer 1

您可以将代码的公共部分移到if/else之后，只需在if/else内设置一个函数变量。

    // Trigger for showing participants
    var triggerDiv = $('span.registered');
    var participantsTable = $('#participants');
    var triggerFn;

    // if participants table has no descendants
    if( !participantsTable.has('tbody').length ){

        console.log('has NOT registrants');

        triggerFn = function(){
            participantsTable.html('<tr><td>No one has yet to register</td></tr>').toggle();
        };

    } else {

        console.log('has registrants');

        triggerFn = function(){
            participantsTable.toggle();
        };

    }
    triggerDiv.on('mouseover mouseout', triggerFn);

Answer 2

这是我想出来的。 jfriend00的回答让我心动......

        /**
        * If there are no registered user, display a unique message
        * Otherwise display registered users
        */
        // Trigger for showing songcircle participants
        var triggerDiv = $('span.registered');
        var participantsTable = $('#participants');

        hasNotParticipantsMsg = (participantsTable.has('tbody').length) ? false : $('<tr><td>No one has yet to register</td></tr>');

        triggerDiv.on('mouseover mouseout', function(){
            if(hasNotParticipantsMsg){
                participantsTable.html(hasNotParticipantsMsg).toggle();
            } else {
                participantsTable.toggle();
            }
        });

如何编写函数以便不重复代码

2 个答案: