Question

现在点击我的div .box正在将背景颜色更改为蓝色，我希望这适用于孩子h4，所以蓝色背景将只在div框的子h4中。

单击时，

div框无背景 h4将获得蓝色背景

HTML：

<div class="box"><i class="fa fa-lg fa-trash"></i>
  <h4>
hello world </h4>
  </h4>
</div>
<div class="box"><i class="fa fa-lg fa-trash"></i>
  <h4>
hello world </h4></div>
<div class="box"><i class="fa fa-lg fa-trash"></i>
  <h4>
hello world </h4></div>
<div class="box"><i class="fa fa-lg fa-trash"></i>
  <h4>
hello world </h4></div>

JS：

$(document).ready(function() {

  var click = false;
  $(document).on('click', '.box', function() {
    if ($(this).hasClass('highlight')) {
      $(this).removeClass('highlight');
      click = false;
      return false;
    }
    if (!click) {
      $(this).find("i").removeClass('red');
      $(this).addClass('highlight');
      click = true;
    } else {
      $(this).find("i").toggleClass('red');
    }
  });
});

的CSS：

.box {
  float: left;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  margin-right: 10px;
}

.highlight {
  background: #0000FF;
}

.fa-trash.red {
  color: red;
}

.fa-trash {
  color: green;
}

https://jsfiddle.net/wv4f2hda/7/

3 个答案:

答案 0 :(得分：2)

答案 1 :(得分：1)

答案 2 :(得分：1)

Answer 1

将$(this).addClass('highlight');替换为$("h4", this).addClass('highlight');

Answer 2

试试这个：

$(document).ready(function() {

  var click = false;
  $(document).on('click', '.box', function() {
    if ($(this).find('h4').hasClass('highlight')) {
      $(this).find('h4').removeClass('highlight');
      click = false;
      return false;
    }
    if (!click) {
      $(this).find("i").removeClass('red');
      $(this).find('h4').addClass('highlight');
      click = true;
    } else {
      $(this).find("i").toggleClass('red');
    }
  });
});

Answer 3

您有两种方法可以执行此操作，直接选择h4框内的div，例如$('.box > h4')，或使用find()功能，例如$('.box').find('h4')

以下示例。

＆＃13;

$(document).ready(function() {

  var click = false;
  $('.box > h4').on('click', function() {
    if ($(this).hasClass('highlight')) {
      $(this).removeClass('highlight');
      click = false;
      return false;
    }
    if (!click) {
      $(this).find("i").removeClass('red');
      $(this).addClass('highlight');
      click = true;
    } else {
      $(this).find("i").toggleClass('red');
    }
  });


  /* You can also do this */
  /*
  $('.box').find('h4').on('click', function() {
    if ($(this).hasClass('highlight')) {
      $(this).removeClass('highlight');
      click = false;
      return false;
    }
    if (!click) {
      $(this).find("i").removeClass('red');
      $(this).addClass('highlight');
      click = true;
    } else {
      $(this).find("i").toggleClass('red');
    }
  });
  */
});

＆＃13;

.box {
  float: left;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  margin-right: 10px;
}
.highlight {
  background: #0000FF;
}
.fa-trash.red {
  color: red;
}
.fa-trash {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"><i class="fa fa-lg fa-trash"></i>
  <h4>
hello world </h4>
  </h4>
</div>
<div class="box"><i class="fa fa-lg fa-trash"></i>
  <h4>
hello world </h4>
</div>
<div class="box"><i class="fa fa-lg fa-trash"></i>
  <h4>
hello world </h4>
</div>
<div class="box"><i class="fa fa-lg fa-trash"></i>
  <h4>
hello world </h4>
</div>

＆＃13;

jquery点击

3 个答案: