チェックボックスが選択されている場合、最寄りのクラスを変更してください

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

を上述のように、StackOverflowのは、コードの書き込みサービスではありません。あなたのコメントに書かれていることから離れて、ここに実例があります。私はthm-card-status-activeを緑色にして、動作することがわかります。

$(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'); 
 
    } 
 
    
 
    }); 
 

 
});

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

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

Answer 2

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