Question

我是jQuery的新手。

当我点击按钮（.selectBtn）时如何更改div.card-header背景色？

我有几个像这样的盒子。

<div class="col-md-4">
  <div class="card bordered">
    <div class="card-header"> <span class="card-title">Item 1</span> </div>
    <div class="card-content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="card-action clearfix">
      <div class="pull-right"> <a href="#" class="btn btn-link black-text selectBtn">Select</a> </div>
    </div>
  </div>
</div>

我尝试了什么：

<script charset="utf-8">
  $(document).ready(function() {
    $('.selectBtn').click(function(event) {
      // alert alert-danger
      event.preventDefault();
      $(this).find('.card-header').css('background-color', 'red');
    });
  });
</script>

Answer 1

.card-header不是.selectBtn的子元素（子元素），它更像是叔叔。因此，您需要通过导航到它parent然后找到相应的sibling来横向展开。

$('.selectBtn').click(function(event) {
   event.preventDefault();
   $(this).closest('.card-action') // selects the parent .card-action of .selectBtn, you can use .parent() too for that
   .siblings('.card-header').css('background-color', 'red'); // selects the sibling .card-header of .card-action 
});

示例：https://jsfiddle.net/DinoMyte/71hgeqnb/12/

Answer 2

你可以这样做，

添加onclick到链接并创建调用它的函数 <a href="#" class="btn btn-link black-text selectBtn" onclick="ChangeColor();">Select</a>

function ChangeColor(){ $('.card-header').css('background-color', 'red'); }

Answer 3

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script charset="utf-8">
  $(document).ready(function() {
    $('.selectBtn').click(function(event) {
      // alert alert-danger
      event.preventDefault();
      $('.card-header').css('background-color', 'red');
    });
  });
</script>

<body>

<div class="col-md-4">
  <div class="card bordered">
    <div class="card-header"> <span class="card-title">Item 1</span> </div>
    <div class="card-content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="card-action clearfix">
      <div class="pull-right"> <a href="#" class="btn btn-link black-text selectBtn">Select</a> </div>
    </div>
  </div>
</div>

</body>
</html>

单击后更改div背景颜色

3 个答案: