制作网页切换新闻提要

对于一个项目，我正在用足够的priveledge来发布新的新闻项目的用户能够看到一个按钮来添加新闻项目。我想用“切换风格”来展示这些新闻项目（因为缺乏更好的单词）。我从数据库中提取数据，用户通过单独页面上的表单提交数据。然后，我要求将所有新闻项目重新放回主页，并将其列为“新闻馈送”。饲料取像一个魅力，可以在这里看到：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="~/[email protected]">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>

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

来源

2017-04-06 Marco Geertsma

您是否尝试过使用CSS n个子选择，看看是否可行？或者，尝试一些JavaScript重新应用样式时，新闻项目重新排序？ – Mauro

第N个孩子将每个项目视为第一个项目，因为它们全部被分开提取。 –

你有没有得到这个工作Marco，如果答案工作记住标记为接受，如果你想出了你自己的解决方案添加并接受它，当你可以让其他人可以受益。 – Mauro

无论您是单独添加项目，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; 
}

来源

2017-04-06 11:16:33 Mauro

制作网页切换新闻提要

回答

相关问题