用jquery更改div格

-1

我目前正在嘗試使用jquery更改幾個divs的位置。我的主要想法是，當我點擊左箭頭時，分配給特定位置的div與左側的位置交換位置，當我再次單擊它時，它將div與左側的位置進一步交換。當我點擊右箭頭時，同樣的事情發生在右側的元素上。用jquery更改div格

這裏是我的HTML代碼：

<input type ="radio" name ="tabs" id = "tab-2"> 
<label for="tab-2"><i class="fa fa-newspaper-o fa-3x" aria-hidden="true" id="paper"></i><div class ="news">LATEST NEWS</div></label> 
<div class ="tab-content-two"> 
    <h3 id="latest-news">Latest News</h3> 
    <i class="fa fa-angle-left" id="left"></i> 
    <i class="fa fa-angle-right" id="right"></i> 

    <img src = "img/1.jpg" id ="first-img"> 
    <div class ="hilight" id="img-text"> 
     <h4 id="news">Latest News Story<br>Title Example</h4> 
    </div> 

    <img src ="img/2.jpg" id ="second-img"> 
    <div class ="hilight-two"id="img-text"> 
     <h4 id="news">Latest News Story<br>Title Example</h4> 
    </div> 

    <img src ="img/3.jpg" id ="third-img"> 
    <div class ="hilight-big" id ="full-text"> 
     <h4 id="news-big">Latest News Story<br>Title Example</h4> 
     <p id="date">14/02/2016</p> 
     <p id ="text-big">Lorem ipsum dolor sit amet,<br> 
      consectetur adipiscing elit.<br> 
      Phasellus imperdiet orci.. 
      <button type="button" id ="button-reading">CONTINUE READING <i class="fa fa-angle-right" id="reading"></button></i> 
     </p> 


    </div> 

    <img src ="img/4.jpg" id ="fourth-img"> 
    <div class ="hilight-three"d="img-text"> 
     <h4 id="news">Latest News Story<br>Title Example</h4> 
    </div> 
</div>

這裏是我試圖建立在爲了實現這個jQuery的：

$("left").click(function() { 
    $(hilight-two).replaceWith("<div>" + $(text-big).text() + "</div>"); 
}); 

$("right").click(function() { 
    $(hilight-two).replaceWith("<div>" + $(text-big).text() + "</div>"); 
});

我已經附上JS提琴爲了有一個更好的主意。 JS Fiddle

這裏是它的外觀在原來的版本，以及創建的不良圖紙：

來源

2016-06-16 ZombieChowder

你能再次澄清，當你點擊左側圖片上，會發生什麼？ –

當你點擊左邊的箭頭時，第三張圖像上的粉色背景文本應該與左邊的那個交換。如果再次點擊它，它應該轉到第一個圖像。同樣的事情適用於右側的箭頭。 – ZombieChowder

找不到$（「left」）'和$（「right」）'，因爲它們不是標籤。使用'$（「#left」）'和'$（「#right」）'通過'id'獲取項目。對於具有class =「hilight-two」的項目，使用$（'。hilight-two'）'。與class =「text-big」相同的項目 – demo

我高亮做了一個類將所有的div和修改你的點擊處理程序

$("#left").click(function() { 
    var news = $(".hilight"); 
    var head = news.first().html(); 
    var length = news.length; 
    for(var i = 0; i < length - 1; i++) { 
     news.eq(i).html(news.eq(i + 1).html()); 
    } 
    news.eq(length - 1).html(head); 
}); 

$("#right").click(function() { 
    var news = $(".hilight"); 
    var tail = news.last().html(); 
    var length = news.length; 
    for(var i = length - 1; i > 0; i--) { 
     news.eq(i).html(news.eq(i - 1).html()); 
    } 
    news.eq(0).html(tail); 
});

我改變了你的css和你的html，以便使用更多的類和更少的id。這裏是更新的jsfiddle
https://jsfiddle.net/qu7cdwkt/5/

希望這將讓你開始

來源

2016-06-16 12:14:49 StaticBeagle

用jquery更改div格

回答

相關問題