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>