Question

<script>
    $(document).ready(function () {

        var lnkAgreement = $('#lnk-agreement');
        if ($('#IsConsultant').attr('checked')) {
            lnkAgreement.attr('href', '@Url.Action("ServiceProviderAgreement", "Home")');
            lnkAgreement.text('service provider agreement');
        }
        else {
            lnkAgreement.attr('href', '@Url.Action("UserAgreement","Home")');
            lnkAgreement.text('user agreement');
        }
        $('#IsConsultant').click(function () {

            if ($('#IsConsultant').attr('checked')) {
                lnkAgreement.attr('href', '@Url.Action("ServiceProviderAgreement", "Home")');
                lnkAgreement.text('service provider agreement');
            }
            else {
                lnkAgreement.attr('href', '@Url.Action("UserAgreement","Home")');
                lnkAgreement.text('user agreement');
            }

        });
    });
</script>
<a href="#" id="lnk-agreement"></a>

如何避免迭代的代码块？

Answer 1

为它制作一个功能：

function Test(){
     if ($('#IsConsultant').attr('checked')) {
          lnkAgreement.attr('href', '@Url.Action("ServiceProviderAgreement", "Home")');
          lnkAgreement.text('service provider agreement');
     }
     else {
          lnkAgreement.attr('href', '@Url.Action("UserAgreement","Home")');
          lnkAgreement.text('user agreement');
    }
 }

Answer 2

把它全部放在一个函数中。

function myFunction() {
    if ($('#IsConsultant').attr('checked')) {
        lnkAgreement.attr('href', '@Url.Action("ServiceProviderAgreement", "Home")');
        lnkAgreement.text('service provider agreement');
    }
    else {
        lnkAgreement.attr('href', '@Url.Action("UserAgreement","Home")');
        lnkAgreement.text('user agreement');
    }
}

然后在文档就绪和点击上调用该函数。

$('#IsConsultant').click(myFunction);

Answer 3

function myMethod(){
if ($('#IsConsultant').attr('checked')) {
            lnkAgreement.attr('href', '@Url.Action("ServiceProviderAgreement", "Home")');
            lnkAgreement.text('service provider agreement');
        }
        else {
            lnkAgreement.attr('href', '@Url.Action("UserAgreement","Home")');
            lnkAgreement.text('user agreement');
        }

}

myMethod();

$('#IsConsultant').click(function () {
 myMethod();
}

Answer 4

一个非常快速的重构给了我这个：

<script>
$(document).ready(function () {

    // select the dom elements
    var lnkAgreement = $('#lnk-agreement');
    var isConsultant = $('#IsConsultant');


    setLnkAgreement(isConsultant.attr('checked'));

    isConsultant.click(function () {
        setLnkAgreement(isConsultant.attr('checked')
    });
});

function setLnkAgreement(isConsultant){
    if (isConsultant) {
        lnkAgreement.attr('href', '@Url.Action("ServiceProviderAgreement", "Home")');
        lnkAgreement.text('service provider agreement');
    }
    else {
        lnkAgreement.attr('href', '@Url.Action("UserAgreement","Home")');
        lnkAgreement.text('user agreement');
    }
}

您需要将常用功能移动到自己的功能中，然后使用所需参数进行克隆。

此致

詹姆斯

Answer 5

<script>
function chooseAgreementLink() {
    if ($('#IsConsultant').attr('checked')) {
        setAgreementLink("ServiceProviderAgreement", "service provider agreement");
    }
    else {
        setAgreementLink("UserAgreement", "userprovider agreement");
    }
}
function setAgreementLink(controller, text) {
    var lnkAgreement = $('#lnk-agreement');
    lnkAgreement.attr('href', '@Url.Action(controller, "Home")');
    lnkAgreement.text(text);
}
$(document).ready(function () {
    setAgreementLink();
    $('#IsConsultant').click(function () {
        setAgreementLink();
    };
};
</script>

Answer 6

这样的事情应该做。

jQuery(function($) {

    var lnkAgreement = $('#lnk-agreement'),
        isConsultant = $('#IsConsultant'),
        handler = function () {
            var isChecked = isConsultant.is(':checked');
            lnkAgreement
                .attr('href', isChecked ? 
                    '@Url.Action("ServiceProviderAgreement", "Home")' : 
                    '@Url.Action("UserAgreement", "Home")'
                    )
                .text(isChecked ? 'service provider agreement' : 'user agreement')
                ;
        };

    isConsultant.on('click', handler);
    handler();

});

尽可能链接你的方法，
尽可能封装在函数中，
在适当的时候缓存变量。

如果您从同一个控制器中的视图中调用"Home"方法，我认为您可以通过省略UrlHelper.Action来简化您的Razor。

Answer 7

此？

$(document)
.ready(function () {
var a = $("#lnk-agreement");
$("#IsConsultant")
    .attr("checked") ? (a.attr("href", '@Url.Action("ServiceProviderAgreement", "Home")'), a.text("service provider agreement")) : (a.attr("href", '@Url.Action("UserAgreement","Home")'), a.text("user agreement")), $("#IsConsultant")
    .click(function () {
    $("#IsConsultant")
        .attr("checked") ? (a.attr("href", '@Url.Action("ServiceProviderAgreement", "Home")'), a.text("service provider agreement")) : (a.attr("href", '@Url.Action("UserAgreement","Home")'), a.text("user agreement"))
})
})

jQuery - 如何简化代码

7 个答案: