我目前正在尝试使用jquery更改一些divs
的位置。我的主要想法是,当我单击左箭头时,分配给特定位置的div与左边的那个交换位置,当我再次单击它时,它会在左侧进一步交换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
答案 0 :(得分:1)
我让hilight成为一个类来对所有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/
希望这会让你开始