如何刷新jQuery中的div onclick？

Question

我是jquery编程新手。我很好奇，如果有按钮点击刷新div的方法？我只知道window.location.reload（）方法，但它会刷新整个页面。

<div id="container"> 
 
     <div id="content"> 
 
     <p style="border: 2px solid black"> 
 
      What's up? 
 
     </p> 
 
     </div> 
 
     <button>Refresh DIV</button> 
 
    </div>

Answer 1

下面是一些例子：

var storeColor = 'red'; 
 

 
$('#container').on('click', 'button', function() { 
 
    var $p = $('#content p'); 
 
    var tmp = $p.css('border-color'); 
 
    $p.css('border-color', storeColor); 
 
    storeColor = tmp; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="content"> 
 
    <p style="border: 2px solid black"> 
 
     What's up? 
 
    </p> 
 
    </div> 
 
    <button type="button">Refresh DIV</button> 
 
</div>

Answer 2

我可能不应该作为回答有一个真实的可能性的参数将发生变化，需要修改这个答案。但是，您可以使用addClass()，removeClass()或toggleClass()轻松添加/删除样式，如边框或背景颜色。

我们已将默认样式和“已更改/活动”样式移至CSS类。下面我们简单地告诉点击处理程序添加或删除将其从默认样式中更改的类。

var $btn0 = $('.other'), 
 
    $btn1 = $('.refresh-target'), 
 
    $target = $('.target'); 
 

 
$btn0.on('click', function (e) { 
 
    $target.toggleClass('highlight', true); 
 
}); 
 

 
$btn1.on('click', function (e) { 
 
    $target.toggleClass('highlight', false); 
 
});

.target { 
 
    border: 2px solid black; 
 
} 
 
.highlight { 
 
    border-color: indianred; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 

 
    <div id="content"> 
 
    
 
    <!-- OP mentioned another button in #content, so here's my interpretation of another button in #content. --> 
 
    <button class="other">Turn Red</button> 
 
    
 
    <p class="target"> 
 
     What's up? 
 
    </p> 
 
    
 
    </div> 
 
    
 
    <button class="refresh-target">Refresh DIV</button> 
 
    
 
</div>