javascript - 用 Jquery 改变 div

Question

我目前正在尝试使用 jquery 更改一些 div 的位置。我的主要想法是，当我单击向左箭头时，分配给特定位置的 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 Fiddle 以便有一个更好的主意。 JS Fiddle

这是一张制作不当的原始版本的绘图:

Answer 1

我突出显示了一个类以将所有 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/

希望这能让你入门