Question

简要说明：当我单击它们时需要切换div的位置。

要求：：如果我单击 hello，world ，这2个应该切换，如果我单击 hello2，world2 ，这2个将切换。这是我的代码：

注意-我已经用一个复选框切换了div，注意-只有最上面的一个正在切换，我想在点击时实现切换

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){

  alert("div swapped");
})


$('#check').change(function () {
//alert('check clicked');
if ($(this).is(':checked')) {

$('#div1').insertAfter($('#div2'));

} else {

$('#div1').insertBefore($('#div2'));
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="div1">Hello</div> 
<div id="div2">World</div>
</div>

<br>
<div>
<div id="div1">Hello2</div> 
<div id="div2">World2</div>
</div>

<br>
 click me to switch Hello,World<input type="checkbox" name="check" id="check"/>

如果我单击hello，world 2将切换，如果我单击hello2，world2，则这2将切换。

请帮助。

Answer 1

如果我说对了，这就是您要寻找的东西：

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){

  alert("div swapped");
})


$('.click').click(function (evt) {
  var $div = $(evt.target).closest('.switch');
  $div.next('.switch').after($div);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
  <div class="switch">Hello</div> 
  <div class="switch">World</div>
</div>

<br>
<div class="click">
  <div class="switch">Hello2</div> 
  <div class="switch">World2</div>
</div>

onclick开关div位置

1 个答案: