0

我有一个博客页面，其中发布了最近的三篇文章，但这些文章会显示文章的所有正文。我尝试使用 dotdotdot jquery 插件将省略号应用于帖子，但它只会应用于当前帖子。我在 Visual Studio Asp.net mvc 中做这个

@using PersonalSite2.Models
@model List<Post>
@{
    ViewBag.Title = "Index";
}


<h2>Index</h2>
<div class="container">
    <div class="row">

        <!-- Blog Entries Column -->
        <div class="col-md-8 wow bounceInUp">

            <h1 class="page-header">
                Blog
            </h1>

            @foreach (var post in Model)
            {
                <h2>
                    <a href="@Url.Action("Details", new { Slug=post.Slug })">@post.Title</a>
                </h2>
                <p class="lead">
                    by <a href="index.php">@post.Author</a>
                </p>
                <p><span class="glyphicon glyphicon-time"></span> Posted on @post.Created.DateTime.ToLongDateString()</p>
                <hr>
                <img class="img-responsive" src="~/assets/images/approach-choice.png" alt="">
                <hr>
                <div>
                    <div id="blog-ell">

                        @Html.Raw(post.Body)

                    </div>
                </div>
                <a class="btn btn-primary" href="@Url.Action("Details", new { Slug=post.Slug})">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
                <br /><br />
                <hr>
            }

            <hr>

            <!-- Pager -->
            <ul class="pager">
                <li class="previous">
                    <a href="#">&larr; Older</a>
                </li>
                <li class="next">
                    <a href="#">Newer &rarr;</a>
                </li>
            </ul>

        </div>

        <!-- Blog Sidebar Widgets Column -->
        <div class="col-md-4 wow bounceInUp" data-wow-delay=".3s">
        @if (User.IsInRole("Admin"))
        {
            <p>                 
                <span>Welcome @ViewBag.UserName</span> |                              
                <a href="@Url.Action("LogOff","Account")">Log Out</a>
            </p>
        }
        else
        {
            <p>
                <a href="@Url.Action("Login","Account")">Login</a> |
                <a href="@Url.Action("Register","Account")">Register</a>
            </p>
        }
            <!-- Blog Search Well -->
            <div class="well">
                <h4>Blog Search</h4>
                <div class="input-group">
                    <input type="text" class="form-control" id="Blog-Search-Well-TextBox">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" id="Blog-Search-Btn">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
                <!-- /.input-group -->
            </div>

            <!-- Blog Categories Well -->
            <div class="well">
                <h4>Blog Categories</h4>
                <div class="row">
                    <div class="col-lg-6">
                        <ul class="list-unstyled">
                            <li>
                                <a href="#">Category Name</a>
                            </li>
                            <li>
                                <a href="#">Category Name</a>
                            </li>
                            <li>
                                <a href="#">Category Name</a>
                            </li>
                            <li>
                                <a href="#">Category Name</a>
                            </li>
                        </ul>
                    </div>
                    <!-- /.col-lg-6 -->
                    <div class="col-lg-6">
                        <ul class="list-unstyled">
                            <li>
                                <a href="#">Category Name</a>
                            </li>
                            <li>
                                <a href="#">Category Name</a>
                            </li>
                            <li>
                                <a href="#">Category Name</a>
                            </li>
                            <li>
                                <a href="#">Category Name</a>
                            </li>
                        </ul>
                    </div>
                    <!-- /.col-lg-6 -->
                </div>
                <!-- /.row -->
            </div>

            <!-- Side Widget Well -->
            <div class="well">
                <h4>Side Widget Well</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
            </div>

        </div>

    </div>
    <!-- /.row -->
</div> <!--Container-->

<script src="~/Scripts/jquery.dotdotdot.js"></script>
<script>
    $(document).ready(function () {
        $('#blog-ell').dotdotdot({
            ellipsis: '...',
            height: 100,
            tolerance: 0,
            wrap: "word"
        });
    })

</script>
4

1 回答 1

1

您定义了多个具有相同 ID [#blog-ell] 的 div（不推荐的做法）。这会导致您的选择器（dotdotdot）仅捕获第一个。尝试为这些元素或自定义属性使用一个类并选择它“.className”或“div[customattr=Something]”

见https://api.jquery.com/id-selector/

于 2015-04-13T20:10:02.143 回答