Question

我有一个关于添加课程的问题。

我已经从 codepen.io 创建了此DEMO。

在此演示中，您可以看到有树状单选按钮。单击选中的单选按钮后单击蓝色按钮，然后.checkedWrap文本将更改。

我想在此.checkedWrap中添加一些类。

所以当你点击

<div class="row demo">
    <input type="radio" id="checked" name="checkit" class="cbx hidden"/>
    <label for="checked" class="lbl"></label>TExt 1
    <div id="1" class="addthisClassone"></div>
  </div>

还有<div id="1" class="addthisClassone"></div>我想从addthisClassone添加.checkedWrap，如下所示：

 <div class="checkedWrap addthisClassone"></div>
 <div class="checkedWrap addthisClasstwo"></div>
 <div class="checkedWrap addthisClasstree"></div>

单击蓝色按钮后如何执行此操作。任何人都可以在这方面帮助我。

CSS

<div class="container">
   <div class="checkedWrap addthisClassone"></div>
   <div class="checkList">
    <div class="row demo">
    <input type="radio" id="checked" name="checkit" class="cbx hidden"/>
    <label for="checked" class="lbl"></label>TExt 1
    <div id="1" class="addthisClassone"></div>
  </div>
  <div class="row demo">
    <input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
    <label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
     <div id="2" class="addthisClasstwo"></div>
  </div>
  <div class="row">
    <input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
    <label for="unchecked_disabled" class="lbl">fdsafasf</label>
     <div id="3" class="addthisClasstree"></div>
  </div>
   </div>
   <div class="Click">Click ok to add checked radio text from the red div</div>
</div>

JS

$('body').on('click', '.Click', function(){
      var checked_radio_text = $('input[name=checkit]:checked').parent().text();
      $('.checkedWrap').text(checked_radio_text);
  });

Answer 1

我建议添加一个额外的通用class而不是ids和 data attributes 来存储要在每个单选按钮上更改的类，检查例如，吼叫。

注意：要添加课程，您可以使用 addClass() 功能，但会附加课程，因此每次点击新课程时都会添加，您可以重置每次点击时使用 removeClass() 的类属性，并添加默认类checkedWrap以及新类：

$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);

希望这有帮助。

段

$(document).ready(function() {
  $('body').on('click', '.Click', function(){
      var checked_radio_text = $('input[name=checkit]:checked').parent().text();
      var additional_class = $('input[name=checkit]:checked').parent().find('.global-class').data('additional-class');
    
      $('.checkedWrap').text(checked_radio_text);
      $('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);
  });
});

.container {
   width:400px;
   height:auto;
   box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
  -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
  -moz-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
   margin:0px auto;
   margin-top:10px;
}
.checkedWrap {
   width:100% !important;
   float:left;
   padding:15px;
   background-color:#b71c1c;
   box-sizing:border-box;
}
.checkList {
   width:100%;
   padding:10px;
   box-sizing:border-box;
   float:left;
}

.lbl {
   float:left;
  position: relative;
  display: block;
  height: 10px;
  width: 34px;
  background: #898989;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  
}

.lbl:after {
  position: absolute;
  left: -2px;
  top: -5px;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
  content: '';
  transition: all 0.3s ease;
}

.lbl:active:after { transform: scale(1.15, 0.85); }

.cbx:checked ~ label { background: #6fbeb5; }

.cbx:checked ~ label:after {
  left: 20px;
  background: #179588;
}

.cbx:disabled ~ label {
  background: #d5d5d5;
  pointer-events: none;
}

.cbx:disabled ~ label:after { background: #bcbdbc; }

.container {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.demo { 
   padding:30px;
   width:100%; 
   overflow:hidden;
   padding:5px;
   box-sizing:border-box;
   text-indent:10px;
}

.hidden { display: none; }

.Click {
   float:left;
  margin-top: 30px;
  color: #fff;
  height:30px;
   background-color:#0288d1;
   color:#ffffff;
   width:100%;
   box-sizing:border-box;
   text-align:center;
   line-height:30px;
   font-family: helvetica, arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;	
   cursor:pointer;
}

.addthisClassone {
   width:10px;
   height:10px;
   background-color:blue;
}
.addthisClasstwo {
   background-color:green;
    width:10px;
   height:10px;
}
.addthisClasstree {
   background-color:black;
    width:10px;
   height:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="checkedWrap addthisClassone"></div>
   <div class="checkList">
    <div class="row demo">
    <input type="radio" id="checked" name="checkit" class="cbx hidden"/>
    <label for="checked" class="lbl"></label>TExt 1
    <div data-additional-class='addthisClassone' class="global-class"></div>
  </div>
  <div class="row demo">
    <input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
    <label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
    <div data-additional-class='addthisClasstwo' class="global-class"></div>
  </div>
  <div class="row">
    <input type="checkbox" id="unchecked_disabled" class="cbx hidden"/>
    <label for="unchecked_disabled" class="lbl">fdsafasf</label>
     <div data-additional-class='addthisClasstree' class="global-class"></div>
  </div>
   </div>
   <div class="Click">Click ok to add checked radio text from the red div</div>
</div>

Answer 2

如果你想用JavaScript添加一个类，你可以使用jQuery，它有一个函数。

检查addClass()。它为特定的jQuery DOM元素添加了一个新类。

Answer 3

addClass将指定的类添加到集合中的每个元素匹配的元素。

试试这个

    $('body').on('click', '.Click', function(){
      var checked_radio_text = $('input[name=checkit]:checked').parent().text();
      $('.checkedWrap').text(checked_radio_text);
      $("#checkedWrap").addClass("addthisClasstree");
  });

Jquery添加已检查的无线电父div类

3 个答案:

段