Question

如何在jquery中使用for循环来编辑和存储MVC4应用程序中隐藏输入字段中的多个已编辑值

这是我的Jquery

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('p').click(function () {
            var textbox = $('<input id="Text1" type="text"  name="Name" />')
            var oldText = $(this).text();
            $(this).replaceWith(textbox);
            textbox.blur(function () {
                var newValue = $(this).val();
                var listItems = $('.listItem');
                listItems.each(function () {
                    $(this).replaceWith(
                    $('<p/>', { text: newValue })
                    .after(
                       $('<input />', { type: 'hidden', name: 'Name', value: newValue })
                    )
                );
                });
                });

              textbox.val(oldText);
        });
    });  


</script>

Answer 1

我们假设您有一个模型：

public class User
{
    public string Name { get; set; }
    public string Address { get; set; }
}

然后是控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var user = new User
        {
            Name = "test1",
            Address = "add1"
        };
        return View(user);
    }

    [HttpPost]
    public ActionResult Index(User user)
    {
        return Content(
            string.Format(
                "name: {0}, address: {1}", 
                user.Name, 
                user.Address
            )
        );
    }
}

和观点：

@model User

@using (Html.BeginForm())
{
    <ul class="editor">
        <li>
            @Html.LabelFor(x => x.Name, Model.Name)
            @Html.EditorFor(x => x.Name)
        </li>
        <li>
            @Html.LabelFor(x => x.Address, Model.Address)
            @Html.EditorFor(x => x.Address)
        </li>
    </ul>

    <button type="submit">OK</button>
}

现在您可以使用以下javascript：

$(function () {
    $('.editor input').blur(function () {
        $(this).hide();
        $(this).closest('li').find('label').html($(this).val()).show();
    });

    $('.editor label').click(function () {
        $(this).hide();
        $(this).closest('li').find('input').show();
    });
});

最后为了最初隐藏输入字段，您可以定义我已应用于.editor元素的<ul> CSS规则：

.editor input {
    display: none;
}

Answer 2

如果要在jquery中循环任何集合，请使用each()。为什么for？

 $.each(collectionarray, function( index, value ) {
 // your code
 });

如何在jquery中使用for循环

2 个答案: