为网页制作切换新闻提要

Question

对于我正在工作的一个项目，用户登录时有足够的权限发布新的新闻项目，可以看到添加新闻项目的按钮。我想用“切换风格”(因为没有更好的词)来展示这些新闻项目。我从一个数据库中提取数据，在这个数据库中，用户通过单独页面上的表单提交数据。然后我会在主页上请求所有的新闻条目，并将它们列为“新闻提要”。这个提要很有吸引力，可以在这里看到：http://prntscr.com/et39yp

我想让第二个、第四个、第六个等在左边有第一个图像或第一个视频列表，如下所示：http://prntscr.com/et3akw

有什么简单的方法可以做到这一点吗？

@{
    var db = Database.Open("Default");
    var fetchRows = "SELECT * FROM Articles";
    db.Execute(fetchRows);
    var articles = db.Query("SELECT articleTitle, articleText, articleVideoUrl, articleImage FROM Articles ORDER BY id DESC");
    var articleTitle = db.Query("SELECT articleTitle FROM Articles");
    string lorem = "";
}

<div class="Articles">
    <h2>Nieuws Feed</h2>
    @foreach (var title in articles)
    {
        <div class="article">
            @{
                string text = title.articleText;
                string firstLetters = new string(text.Take(50).ToArray());
                <div class="col s6">
                    <h3>@title.articleTitle</h3>
                    <p>@firstLetters</p>
                    <a href="~/LeesMeer.cshtml?title=@title.articleTitle">Lees meer...</a>
                </div>
                <div class="col s6">
                    @{
                        if (title.articleVideoUrl != lorem)
                        {
                            //Iframe for youtube feed here
                        }
                        else if (title.articleVideoUrl == lorem && title.articleImage != "")
                        {
                            <div class="result">
                                <img src="@title.articleImage" alt="image"/>
                            </div>
                        }
                    }
                </div>
            }
        </div>
    }
</div>

现在，切换新闻文章的事情是我能够解决的事情，我正在努力的事情将是以下。用户能够编辑/移除新闻项目。所以我不能跟踪索引值或任何类似的东西，因为如果用户从提要中间删除一项，它将是无效的。我的第一个猜测是使用javascript的.toggleclass，这可能适用于最初加载项目，但如果用户删除一个项目，它不会以正确的方式显示它们。任何帮助都是受欢迎的。

Answer 1

单独添加项目应该没有关系，nth-child(odd|even)应该仍然可以工作。

你可以在这里看到它的工作方式：http://jsfiddle.net/Chairman_Mau/uap93rtL/4/ -请注意，当你点击上移/下移按钮时，样式会自动改变。

HTML

<div class="articles">
    <h1>header</h1>
    <div class="article">
        paragraph
    </div>
    <div class="article">
        paragraph
    </div>
    <div class="article">
        paragraph
    </div>
    <div class="article">
        paragraph
    </div>
    <div class="article movethis">
        paragraph - move this one
    </div>
    <div class="article">
        paragraph
    </div>
    <input type="button" value="add article" class="addarticle"/>
     <input type="button" value="move up" class="moveup"/>
      <input type="button" value="move down" class="movedown"/>
</div>

Javascript

$(".addarticle").click(function () {
  $(".articles").append('<div class="article">added</div>');
});

$(".moveup").click(function(){
      var prev = $(".movethis").prev('.article');
    $(".movethis").detach().insertBefore(prev);
});

$(".movedown").click(function(){
        var next = $(".movethis").next('.article');
    $(".movethis").detach().insertAfter(next);
});

CSS

.articles .article:nth-of-type(even)
{
    color: Green;
}
.articles .article:nth-of-type(odd)
{
    color: Red;
}