Question

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

＆＃13;

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

＆＃13;

Answer 1

我可能不应该回答，因为参数会发生变化并且需要更改此答案。但是，您可以使用addClass()，removeClass()或toggleClass()轻松添加/删除样式，例如边框或背景颜色。

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

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>

Answer 2

以下是一些例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在jquery中刷新div onclick？

2 个答案: