Question

我正在建立一个非常具有许多ajax类型功能的互动网站。

我开始以相当数量的消息Jquery代码结束，所有这些代码都与我的蜜蜂标签一起存在。

例如

<% foreach (var group in Model.GroupBy(item => item.goalId))
{ %>
//$('#AddNew2<%= Html.Encode(group.Key) %>').html('<input type="text" name="" value=""/>');
$('#AddNew2<%= Html.Encode(group.Key) %>').one('click', function(event) {
    $('#AddNew2<%= Html.Encode(group.Key) %>').html('<input id="AddNew2<%= Html.Encode(group.Key) %>" type="text" name="" value=""/>').focus();

        $('#AddNew2<%= Html.Encode(group.Key) %>').bind('keypress', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) { //Enter keycode
        //Do something
        alert("hello");
        }
        //This will display the keycode
        //alert(code);
        //            
        });   
});

我的问题是双重的

我可以使用.ascx控件，而不是在视图或主站点模板中包含所有这些代码吗？或者我可以导入一个.js文件，但仍然有＆lt; %%＆gt;标签在里面工作？
我是否以非常糟糕的方式使用jQuery？我觉得我对选择器的使用太过简单了，因为我觉得选择我需要的元素会更清晰。

请记住，我将有许多不同的数据列表，这些数据可以在同一页面上添加/更新，可能最多有数百个不同的元素和ID。

Answer 1

首先，您可以（并且可以说）应该使用javascript变量来保存该值并简单地重复使用它。这将提高代码的可读性。其次，我不确定你要做什么 - 看起来你正在为每个元素设置一个点击处理程序。我建议你给它们一个类，然后使用该类作为应用元素的选择器。第三，看起来您正在创建一个与现有元素具有相同ID的新元素。那将是禁忌。你应该给它一个新的id和/或名字。如果使用类，则可能不需要外部元素上的id。

实施例

布局：

<% foreach (var group in Model.GroupBy(item => item.goalId)) { %>
   <p>
     <input type="button" value="Add" class="add-goal" />
     <input type="hidden" value='<%= group.Key %>' />
   </p>
<% } %>

脚本

$('.add-goal').one( 'click', function() {
    var goalid = $(this).next('input[type=hidden]').attr('value');
    var parent = $(this).parent().html('');
    $( '<input type="text" id="AddNew2' + goalid
           + '" name="AddNew2' + goalid + '" value="" />' )
        .appendTo(parent)
        .keypress( function(e) {
            ...
        });

});

动态jQuery asp.net mvc凌乱的代码，如何更干净地重构

1 个答案: