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

HI现在尝试这种方式

<强> .html()

首先保存您的 square-1 div content，而不是替换content square-2 div < / p>

$(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 2

试试this。当您点击div.square-1时，它将获得div.square-2

的内容

<强> JS

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;
    }
});

Answer 3

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

用另一个div内容切换相同的div内容

3 个答案: