Question

我想在动态创建的jQuery Accordion下从几个子节点中删除几个类属性。我无法让我的jQuery运行。这是我到目前为止所做的。

<cfset index = 1>
<cfloop query="qApp">


<h3 id="header_#index#">#ApplianceType#</h3>
   <div id="header_#index#">
      <p> 
          <!---- Serial Number --->
          <div class="ctrlHolder invalid error" id="serial_#index#"><label>Serial Number</label>
              <cfinput type="text"
                          name="app_#ApplianceTypeID#_ser"
                          data-default-value="Enter Serial Number or Value"
                          size="35" 
                          class="textInput required invalid error"
                          id="serialinput_#index#"
                          value=""  />
                  <cfinput name="app_#ApplianceTypeID#_IDd" type="hidden" value="" />
                <p class="formHint">field is required</p>
          </div>
          <!--- Appliance --->
          <div class="ctrlHolder invalid error" appl_#index#><label>Appliance</label>
              <cfinput name="app_#ApplianceTypeID#_app" 
                  data-default-value="Appliance"
                  class="textInput required invalid error"
                  id="applinput_#index#"
                  value="">
            <p class="formHint">Appliance is required</p>
          </div>
          <!--- active --->
          <div class="ctrlHolder" id="color_select">
            <ul>
              <li>
              <label for="agreement">
              <input type="checkbox" id="checkbox2_#index#" name="app_#ApplianceTypeID#_chk" style="width:50px"> 
              active
              </label>
              </li>
            </ul>
          </div>
     </p>
     </div>
    <cfset index = index + 1>
</cfloop>

   <script>
      $('[id^=serial_]').each(function(){
                $("#checkbox2_"+ id).change(function(){
                    if($(this).is(":checked")) {
                        //separate id2 and checkbox
                        sep_selid2 = this.id.split("_");
                        //separate id 
                        selid2 = sep_selid2[1]; 
                        $('H3#header_' + selid2).children().addClass("required");
                    } else {
                        //separate id2 and checkbox
                        sep_selid2 = this.id.split("_");
                        //separate id 
                        selid2 = sep_selid2[1]; 
                        $('div#header_' + selid2).children().removeClass("required");
                        $('div#header_' + selid2).children().removeClass("invalid");
                        $('div#header_' + selid2).children().removeClass("error");
                    }
                });
            });

    </script>

因此，所需的功能是当用户选中“活动”复选框时，输入字段已将“必需”添加到类中。当用户取消选中“活动”复选框“请求”时，将删除“错误”和“无效”。如果我困惑你并问任何问题，请告诉我。谢谢！

Answer 1

一种方法是使用类属性

<h3 id="header_#index#">#ApplianceType#</h3>
<!--Add a class top-parent to the top div element-->
<div class="top-parent">
    ......
    <!--Add the class checkbox2 to the checkbox so that it can be accessed easily-->
    <input type="checkbox" id="checkbox2_#index#" name="app_#ApplianceTypeID#_chk" style="width:50px" class="checkbox2">

然后

//dom ready handler
jQuery(function () {
    //register change handler for the checkboxes
    $(".checkbox2").change(function () {
        //find all the input elements within the top-parent element which has the current checkbox
        var $inputs = $(this).closest('.top-parent').find(':input');
        if (this.checked) {
            $inputs.addClass("required");
        } else {
            $inputs.removeClass("error required invalid");
        }
    });
})

删除孩子的类

1 个答案: