与另一个div内容切换相同的div内容。

Question

我希望能够点击div.square-1并让它与div.square-2切换

div本身需要像按钮一样工作，我不希望外部按钮激活按钮，就像他们在jQuery文档中做的那样

下面是我的代码示例。

<a href="#" >
    <div class="square-box square-1">
        <h1>Square 1</h1>
    </div>
</a>

<a href="#">
    <div class="square-box square-2">
        <h1>Square 2</h1>
    </div>
</a>


.square-box {
    width: 100px;
    height: 100px;
}

#square-1 {
    background-color: blue;
}

#square-2 {
    background-color: red;
}

实现这一目标的最佳途径是什么？

Answer 1

当您单击div.square-1时，它将获得div.square-2的内容

​

var content1 = $('.square-1').html();
var content2 = $('.square-2').html();
var content = 1;

$('.square-1').click(function() {
  if (content == 1) {
    $(this).html(content2);
    content = 2;
  } else {
    $(this).html(content1);
    content = 1;
  }
});

.square-box {
  width: 100px;
  height: 100px;
}

#square-1 {
  background-color: blue;
}

#square-2 {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
  <div class="square-box square-1">
    <h1>Square 1</h1>
  </div>
</a>

<a href="#">
  <div class="square-box square-2">
    <h1>Square 2</h1>
  </div>
</a>

​

Answer 2

嗨，请到这边来

.html()

首先保存您的 square-1 div content而不是替换content您的square-2 div

​

$(document).ready(function(){

      
  $('.square-1').on('click', function(){
        
    
    var thisText =   $(this).find('h1').text();
    
    
    $('.square-2 h1').html(thisText);
      
  });
  
  
});

.square-box {
    width: 100px;
    height: 100px;
}

.square-1 {
    background-color: blue;
}

.square-2 {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" >
    <div class="square-box square-1">
        <h1>Square 1</h1>
    </div>
</a>

<a href="#">
    <div class="square-box square-2">
        <h1>Square 2</h1>
    </div>
</a>

​

Answer 3

看看这，它可能是最适合的方法。