Question

新手在这里。想请求帮助。如何动态交换2个div。当您点击按钮时，它将交替交换。我看到了stackoverflow问题，但它没有用。

$("button").click(function(){
    var v1 = $('.red').val(),
        v2 = $('.blue').val();
    $('.red').val(v2);
    $('.blue').val(v1);
});

＆＃13;

$("button").click(function(){
    var v1 = $('.red').val(),
        v2 = $('.blue').val();
    $('.red').val(v2);
    $('.blue').val(v1);
});

＆＃13;

.red {
  color: #fff;
  text-align: center;
  padding-top: 75px;
  box-sizing: border-box;
  width: 250px;
  height: 250px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

.blue {
  color: #fff;
  text-align: center;
  padding-top: 75px;
  box-sizing: border-box;
  width: 250px;
  height: 250px;
  background: blue;
  position: absolute;
  top: 20px;
  left: 20px;
}

button {
  margin-top: 300px;
  clear: both;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
I am red!
</div>

<div class="blue">
I am blue!
</div>

<button>Swap box!</button>

＆＃13;

这是我的傻瓜：https://jsfiddle.net/4jbdznpa/

希望您有一点时间帮助我进行开发。

Answer 1

您可以将div元素包装在容器中，然后在button上单击前一个div元素到父级。根据父容器中的位置设置元素的样式。

jQuery(function($) {
  $("button").click(function() {
    $('.container div:last').prependTo('.container');
  });

});

.container div {
  box-sizing: border-box;
  width: 250px;
  height: 250px;
  text-align: center;
  padding-top: 75px;
  position: absolute;
  color: #fff;
}
.container div:first-child {
  top: 0px;
  left: 0px;
}
.container div:last-child {
  top: 20px;
  left: 20px;
}
.container div.red {
  background: red;
}
.container div.blue {
  background: blue;
}
button {
  margin-top: 300px;
  clear: both;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="red">
    I am red!
  </div>

  <div class="blue">
    I am blue!
  </div>
</div>

<button>Swap box!</button>

Answer 2

我更新了你的jsfiddle，它使用id而不是class。这样可以让您更好地切换＆＃39;你的div。

https://jsfiddle.net/4jbdznpa/3/

HTML

.next()

的Javascript

<div id="red">
    I am red!
</div>

<div id="blue">
    I am blue!
</div>

<button>Swap box!</button>

CSS

$("button").click(function(){
    var v1 = $('#red').html(),
        v2 = $('#blue').html();
    $('#red').html(v2);
    $('#blue').html(v1);
    $('#red').prop("id", "TEMP");
    $('#blue').prop("id", "red");
    $('#TEMP').prop("id", "blue");
});

如果您正在寻找，请告诉我。

Answer 3

要交换元素，最简单的方法是使用CSS根据元素在父类和类名中的位置组合来设置元素的样式。然后，您可以使用jQuery在DOM中交换它们。像这样：

$("button").click(function() {
    $('div:eq(0)').insertAfter('div:eq(1)')
});

div {
    color: #fff;
    text-align: center;
    padding-top: 75px;
    box-sizing: border-box;
    width: 100px; /* size amended to fit in snippet better */
    height: 100px; /* size amended to fit in snippet better */
    position: absolute;
}
div.red {
    background: red;
}
div.blue {
    background: blue;
}
div:nth-of-type(1) {
    top: 0;
    left: 0;
}
div:nth-of-type(2) {
    top: 20px;
    left: 20px;
}

button {
    margin-top: 150px;
    clear: both;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
    I am red!
</div>

<div class="blue">
    I am blue!
</div>

<button>Swap box!</button>

Answer 4

我认为这对你有帮助。

$("button").click(function(){
  if($(".holder >div:last-child").hasClass("current")){
     $(".holder >div:last-child").removeClass("current");
     $(".holder >div:first-child").addClass("current");
  }else{
     $(".current").removeClass("current").next().addClass("current");
  }
});

body {
    margin:0;
    padding:0;
}
.holder {
    width: 100px;
    height:100px;
    border:1px solid #000000;
}

.holder div {
    width: 100px;
    height: 100px;
    position:absolute;
    top:0;
    left:0;
    z-index:0; /*init z-index*/
}
.holder div.current{z-index:1;} /*only this DIV will be visible*/
.one {
    background:red;
}
.two {
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="holder">
    <div class="one current">1</div>
    <div class="two">2</div>
    
</div>
<button>click</button>

如何使用Jquery交换div

4 个答案: