Question

我想在选中/取消选中项目时使用jquery / javascript更改<span class="thm-card-status">Active</span>的类。将会有很多<div class="thm-card"></div>容器，因此只应针对该特定卡进行更改。

  <div class="thm-card">
    <div class="thm-card-media">
      <img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
      <div class="thm-card-overlay">
        <form class="thm-form">
          <div class="form-group"><!--Default Checkbox Item-->
            <label for="__FOR__">
              <input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
              <span class="thm-form-label-side">Active</span>
            </label>
            <a href="#" title="What is this?" data-toggle="popover" data-placement="top" data-content="You can make this slide active by checking this option." data-trigger="hover" class="thm-text-link-default"><i class="fa fa-question-circle"></i></a>
          </div>
        </form><!--Form-->
      </div>
      <span class="thm-card-status">Active</span>

    </div>
    <div class="thm-card-content">
      <div class="thm-card-details">
        <h4>THM Slider Main</h4>
      </div>
    <div class="thm-card-control">
      <div class="thm-card-links">
        <a href="#" class="thm-text-link-card" title="View">View</a>
        <a href="#" class="thm-text-link-card" onclick="return launchEditor('editableimage1', 'https://thehomemag.com/Images/HomeSlider/8.jpg');">Edit</a>
        <span class="thm-card-info"><i class="fa fa-star-o"></i></span>
        <span class="thm-card-info"><i class="fa fa-trash"></i></span>
      </div>
    </div>
    </div>
  </div>

修改我试过了：

$('.thm-checkbox-status').change(function() {
    if($(this).is(':checked')) {
        $('.thm-card-status').attr('checked', '').closest('.thm-card-status').addClass('thm-card-status-active');
    } else {
        $('.open_sub_ja').closest('div').removeClass('someclass');
    }
});

和

$("thm-checkbox-status:checkbox").on('change', function(){
        $(this).closest('.thm-card-status').attr('class', 'thm-card-status-active');;
});

Answer 1

$('.thm-checkbox-status').change(function(){
     $(this).closest('.thm-card-overlay').next().addClass('something');
});

Answer 2

如上所述，StackOverflow不是代码编写服务。关于你在评论中所写的内容，这是一个有效的例子。我将thm-card-status-active设为绿色，以便您可以看到它的效果。

＆＃13;

$(function() {

  $('input.thm-checkbox-status').change(function() { 
    
    if($(this).prop("checked") == true){
      $(this).closest('div.thm-card').find('span.thm-card-status').addClass('thm-card-status-active'); 
    } else {
      $(this).closest('div.thm-card').find('span.thm-card-status').removeClass('thm-card-status-active'); 
    }
    
  });

});

＆＃13;

.thm-card-status-active {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thm-card">
    <div class="thm-card-media">
      <img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
      <div class="thm-card-overlay">
        <form class="thm-form">
          <div class="form-group"><!--Default Checkbox Item-->
            <label for="__FOR__">
              <input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
              <span class="thm-form-label-side">Active</span>
            </label>
            <a href="#" title="What is this?" data-toggle="popover" data-placement="top" data-content="You can make this slide active by checking this option." data-trigger="hover" class="thm-text-link-default"><i class="fa fa-question-circle"></i></a>
          </div>
        </form><!--Form-->
      </div>
      <span class="thm-card-status">Active</span>

    </div>
    <div class="thm-card-content">
      <div class="thm-card-details">
        <h4>THM Slider Main</h4>
      </div>
    <div class="thm-card-control">
      <div class="thm-card-links">
        <a href="#" class="thm-text-link-card" title="View">View</a>
        <a href="#" class="thm-text-link-card" onclick="return launchEditor('editableimage1', 'https://thehomemag.com/Images/HomeSlider/8.jpg');">Edit</a>
        <span class="thm-card-info"><i class="fa fa-star-o"></i></span>
        <span class="thm-card-info"><i class="fa fa-trash"></i></span>
      </div>
    </div>
    </div>
  </div>

＆＃13;

选中复选框后更改最近的班级

2 个答案: