製作網頁切換新聞提要

對於一個項目，我正在用足夠的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

製作網頁切換新聞提要

回答

相關問題