Question

我已经完成了一些看似很长的事情，这些事情可能很简单......那么你有一个更简单的方法吗？

我有这个页面：

<div>
        <table>
            <tr>
                <td colspan="4"><h2>Titre 1</h2></td>
            </tr>   
            <tr>
                <td>Choix</td>
                <td><form:checkbox path="cas5"/></td>
            </tr>
            <tr>
                <td>Libell&eacute;</td>
                <td colspan="3"><form:input path="libelleCas5" class="libelle" size="100" maxlength="100" /></td>
            </tr>
            <tr>
                <td>Statut</td> 
                <td><form:input path="statutCas5" class="statut" size="10" maxlength="2" /></td>
                <td align="right">Dossier</td>  
                <td><form:input path="numDossierCas5" size="10" maxlength="2" /></td>
            </tr>   
            <tr>
                <td align="left">D&eacute;tail</td> 
                <td colspan="3"><form:input path="detailSuiviCas5" class="detail" size="100" maxlength="500" /></td>
            </tr>
            <tr>
                <td align="left">Contact</td>   
                <td colspan="3"><form:input path="contactCas5" class="contact" size="50" maxlength="50" /></td>
            </tr>
         </table>   
     </div>
     <div>
        <table>
            <tr>
                <td colspan="4"><h2>Titre 2</h2></td>
            </tr>   
            <tr>
                <td>Choix</td>
                <td><form:checkbox path="cas6"/></td>
            </tr>
            <tr>
                <td>Libell&eacute;</td>
                <td colspan="3"><form:input path="libelleCas6" class="libelle" size="100" maxlength="100" /></td>
            </tr>
            <tr>
                <td>Statut</td> 
                <td><form:input path="statutCas6" class="statut" size="10" maxlength="2" /></td>
                <td align="right">Dossier</td>  
                <td><form:input path="numDossierCas6" size="10" maxlength="2" /></td>
            </tr>   
            <tr>
                <td align="left">D&eacute;tail</td> 
                <td colspan="3"><form:input path="detailSuiviCas6" class="detail" size="100" maxlength="500" /></td>
            </tr>
            <tr>
                <td align="left">Contact</td>   
                <td colspan="3" ><form:input path="contactCas6" class="contact" size="50" maxlength="50" /></td>
            </tr>
         </table>   
     </div>

我想添加一个带有＆＃34; mailto＆＃34;的按钮。每个联系区域后的链接（每个输入都是class = contact）。

我用这样的jQuery做到了：

$(".contact").each(function () {
    var libelleTmp = $(this).parents('table').find('.libelle').val().replace(/'/g, " ").replace(/"/g, " ");
    var detailTmp = $(this).parents('table').find('.detail').val().replace(/'/g, " ").replace(/"/g, " ");
    var onclickvalue = "mailto:" + $(this).val() + "?subject=" + libelleTmp + "&body=" + detailTmp + "\';";
    console.log($(this).val() + libelleTmp);
    var bouton = '<tr class="boutonMail"><td colspan=4><input type="button" onclick="window.location=\'' + onclickvalue + '" value="Envoyer email" /></tr></td>';
    console.log(bouton);
    $(this).parents('table').append(bouton);
    if ($(this).parents('table').find('.statut').val() == 'BL' && !$(this).val()) {
        $(this).parents('table').find('.boutonMail').hide();
    }
}).change(function () {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var emailaddressVal = $(this).val();
    if (emailaddressVal == '') {} else if (!emailReg.test(emailaddressVal)) {
        $(this).parents('table').find('.boutonMail').hide();
    } else {
        var libelleTmp = $(this).parents('table').find('.libelle').val().replace(/'/g, " ").replace(/"/g, " ");
        var detailTmp = $(this).parents('table').find('.detail').val().replace(/'/g, " ").replace(/"/g, " ");
        var onclickvalue = "mailto:" + $(this).val() + "?subject=" + libelleTmp + "&body=" + detailTmp + "\';";
        console.log($(this).val() + libelleTmp);
        var bouton = '<tr class="boutonMail"><td colspan=4><input type="button" onclick="window.location=\'' + onclickvalue + '" value="Envoyer email" /></tr></td>';
        console.log(bouton);
        $(this).parents('table').find('.boutonMail').replaceWith(bouton);

        $(this).parents('table').find('.boutonMail').show();
    }
});

它有点长......你有更简单的方法吗？

非常感谢

Answer 1

在您的情况下，我会尝试创建一个对象以防止代码重复：

<强> The Demo

function mailToButton(contact) {
    this.contact = contact;
    this.tableParent = this.contact.parents('table');
    this.libelleTmp = this.tableParent.find('.libelle').val().replace(/'/g, " ").replace(/"/g, " ");
    this.detailTmp = this.tableParent.find('.detail').val().replace(/'/g, " ").replace(/"/g, " ");
    this.emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    this.appendToTable = function() {
        this.tableParent.append(this.getHtml());
        if (this.tableParent.find('.statut').val() == 'BL' && !this.contact.val()) {
            this.tableParent.find('.boutonMail').hide();
        }
    };
    this.getOnclickValue = function() {
        return "mailto:" + contact.val() + "?subject=" + this.libelleTmp + "&body=" + this.detailTmp + "\';";
    };
    this.getHtml = function() {
        return '<tr class="boutonMail"><td colspan=4><input type="button" onclick="window.location=\'' + 
            this.getOnclickValue() + 
            '" value="Envoyer email" /></tr></td>';
    };
    this.mailIsValid = function() {
        return this.emailReg.test(this.contact.val());
    };
    this.refresh = function() {
        var buttonMail = this.tableParent.find('.boutonMail');
        if(!this.mailIsValid()) {
            buttonMail.hide();
        } else if (this.contact.val() != '') {
            buttonMail.replaceWith(this.getHtml());
            buttonMail.show();
        }
    };
}

然后在文档准备就绪上只需要一小段代码：

$(document).ready(function(){
    $(".contact").each(function () {
        var button = new mailToButton($(this));
        button.appendToTable();
        $(this).data('button', button);
    }).change(function () {
        var button = $(this).data('button');
        button.refresh();
    });
});

这也使代码更具可读性和模块性。

简化自动按钮的jquery功能

1 个答案: