Question

以下代码适用于简单的简报注册小部件。

我确定有办法让它更简洁，更有想法吗？

var email_form = $('.widget_subscribe form'); 
var email_submit = $('.widget_subscribe .submit');
var email_link = $('.widget_subscribe .email');

// Hide the email entry form when the page loads
email_form.hide();

// Show the form when the email link is clicked
$(email_link).click( function () {
    $(this).toggle();
    $(email_form).toggle();
    return false;
});

// Hide the form when the form submit is clicked
$(email_submit).click( function () {
    $(email_link).toggle();
    $(email_form).toggle();
});

// Clear/reset the email input on focus 
$('input[name="email"]').focus( function () {
    $(this).val("");
    }).blur( function () {
        if ($(this).val() == "") {
            $(this).val($(this)[0].defaultValue);
        }
});

Answer 1

这里有一些类似的代码。

// Show the form when the email link is clicked
$(email_link).click( function () {
        $(this).toggle();
        $(email_form).toggle();
        return false;
});

// Hide the form when the form submit is clicked
$(email_submit).click( function () {
        $(email_link).toggle();
        $(email_form).toggle();
});

它可以被重构，因此相似性是显而易见的。

// Show the form when the email link is clicked
$(email_link).click( function () {
        $(email_link).toggle();
        $(email_form).toggle();
        return false;
});

// Hide the form when the form submit is clicked
$(email_submit).click( function () {
        $(email_link).toggle();
        $(email_form).toggle();
});

所以你可以将链接和表单换成一个函数。

var toggleEmailLinkAndForm = function () {
        $(email_link).toggle();
        $(email_form).toggle();
}   

$(email_link).click(toggleEmailLinkAndForm);
$(email_submit).click(toggleEmailLinkAndForm);

正如其他人所指出的那样，你可以放弃redunant $（）s。

var toggleEmailLinkAndForm = function () {
        email_link.toggle();
        email_form.toggle();
}   

email_link.click(toggleEmailLinkAndForm);
email_submit.click(toggleEmailLinkAndForm);

Answer 2

它已经非常简洁，你可以做的更多。

你有$（email_submit）的任何地方你都可以拥有email_submit，因为你已经将它包装在$（）中（这使它成为一个jquery对象）。

例如：

email_submit.click( function () {
    email_link.toggle();
    email_form.toggle();
});

Answer 3

我喜欢Patrick McElhaney Code Best。

toggleEmailLinkAndForm() {
    email_link.toggle();
    email_form.toggle();
}   

email_link.click(toggleEmailLinkAndForm);
email_submit.click(toggleEmailLinkAndForm);

部分重构不会过分。我不建议创建一个额外的点击事件来调用其他点击事件。重构的重点是可读性和灵活性。你也可以使用jQuery方法“add”来缩小代码，但它会变得更难阅读。

email_link.add(email_submit).click(function(){
    email_link.add(email_form).toggle();
});

Answer 4

就像Patrick说的那样（+1），你也可以跳过额外的功能：

email_submit.click(function () {
    email_link.toggle();
    email_form.toggle();
});
email_link.click(function () {
    email_submit.click(); //calls the click function already subscribed
    return false;
});

我怎么能重构这个jQuery代码？

4 个答案: