Question

所以我创建了div来自controller和model的静态数据。现在，当我点击ADD按钮时，新项目应添加到列表中，div应该自动显示到页面。希望我很清楚:)

请指导我如何实现它？谢谢

Answer 1

之前应该可以使用，但我猜你改了html，好的，试试这个

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    var i=y=0;
    var newarr = new Array();
    var divContent = '';

@foreach (var job in Model)
{

divContent = '<div class="panel panel-default" id="panel2"><div class="panel-heading-new"><h4 class="panel-title" id="newpanel1"><a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo">';
divContent += '@Html.DisplayFor(modelItem => job.Header, new { job.Id })';
divContent += '</a></h4></div><div id="collapseTwo" class="panel-collapse collapse in"><div class="panel-body"><p class="lead justified">';
divContent += 'Qualifications and Skills:';
divContent += '</p><ul class="fa-ul">';
divContent += '<li><i class="fa-li fa fa-hand-o-right pad-icon"></i><span class="lead justified">@Html.DisplayFor(modelItem => job.Content, new { job.Id })</span></li>';
divContent += '</ul><br /></div></div></div>';
newarr[i] = $(divContent);
i = i +1;

}
$(document).ready(function(){
    $("a#add").click(function(){
        if (y<i) {
            var content = newarr[y];
            $('#maincontainer').append(content);
            y++;
        } else {
            alert('No other Job!');
        }
        return false;
    });
});
</script>



<a href="#" id="add">ADD</a>

    <div class="container">
    <div class="col-lg-12" id="maincontainer">


     </div>
</div> 


<script>

</script>

Answer 2

@model  IEnumerable<Nexcentus.UI.Models.JobOpening>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    var i=0;
    var y=0;
    var newarr = new Array();

</script>

<script>
@foreach (var job in Model)
{
newarr[i] = $( "<li><i class=\"fa-li fa fa-hand-o-right pad-icon\"></i><span class=\"lead justified\">@Html.DisplayFor(modelItem => job.Content, new { job.Id })</span></li>");
i = i +1;
}
</script>


    <div class="container">
<a href="#" id="add">ADD</a>
        <div class="col-lg-12">
        @foreach (var job in Model)
                    {
                        <div class="panel panel-default" id="panel2">

                                <div class="panel-heading-new"> 

                                        <h4 class="panel-title-new" id="newpanel1">
                                            <a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo">
                                                @Html.DisplayFor(modelItem => job.Header, new { job.Id })
                                            </a>
                                        </h4>

                                    </div>

                            <div id="collapseTwo" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    <p class="lead justified">
                                        Qualifications and Skills:
                                    </p>
                                    <ul class="fa-ul">

                                        <li><i class="fa-li fa fa-hand-o-right pad-icon"></i><span class="lead justified">@Html.DisplayFor(modelItem => job.Content, new { job.Id })</span></li>
                                    </ul>
                                    <br />

                                </div>

                            </div>
                        </div>
<script>

$("a#add").click(function(){
    if (y<i) {
        var content = newarr[y];
        $('ul.fa-ul').append(content);
        y = y+1;
    }
    return false;
});
</script>

试试这个

按钮点击动态添加列表中的项目。帮助请

2 个答案: