亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

創建和修改元素時加載 JS 時出現問題

創建和修改元素時加載 JS 時出現問題

PHP
慕尼黑5688855 2023-10-15 16:53:53
我希望你能幫助我解決我在執行 JS 時遇到的這些問題,我將詳細說明兩個問題:創作時我正在使用change和select事件來了解我是否正在選擇和更改問題中的選項combobox。問題是當我選擇SINGLE / MULIPLE ANSWER問題類型的選項 1 時。如果保存時我沒有checkbox從可用選項中選擇任何選項,它會向我發出警報,要求我至少選擇一個選項,到目前為止,一切對我來說都很好,但是當我checkbox從選項中選擇一個并嘗試保存時,警報會出現不會消失。我嘗試添加該事件checked,但它對我不起作用。我想要做的是,當我保存并且沒有選擇選項時,它會向我拋出警報消息(這已經是這樣),當我選擇一個選項時,警報消失,以便它允許我保存。修改時第二個問題發生在我嘗試修改一個元素時,JS 不運行,因此它可以工作,我必須選擇另一個選項并返回到前一個選項,以便它可以工作。JS$(".dynamicform_wrapper").on("change","select",function(){             if ($(this).val()== 2) {            $('#0').find('.option-item').not(':first').remove(); //removed all entries found in            $('#0').find('.option-item:first').hide();             $('#0').find('.item-option').hide();             $('#0').find('.question').attr('colspan',2);        }else if ($(this).val()== 1){            //var numberNotChecked = $('#0').find('.option-item input:checkbox:not(":checked")').length;            var numberChecked = $('#0').find('.option-item input:checkbox:checked').length;            $('#0').find('.container-options').append(newtr); //add input            $('#0').find('.item-option').show();             $('#0').find('.question').removeAttr('colspan',2);            $( "#dynamic-form" ).submit(function( event ) {                if(numberChecked > 0){                    $('#0').find('.text-error-check').hide();                    $('#0').find('.dynamicform_inner').removeAttr("style");                } else {                    $('#0').find('.text-error-check').show();                    $('#0').find('.dynamicform_inner').css({'border':'2px solid #dd4b39','background-color':'white'});                    event.preventDefault();                }            });       }});希望你能幫助我解決這些問題,我不太擅長使用 javascript 或 jquery。我預先感謝您的支持。
查看完整描述

1 回答

?
慕妹3242003

TA貢獻1824條經驗 獲得超6個贊

0在您當前的代碼中,您使用錯誤的選擇器來獲取選中復選框的總值。如果您檢查當前的 jquery 代碼,即使您檢查了任何值,它也總是給出。因此,您可以使用input[type="checkbox"]:checked它將為您提供選中復選框的正確值。


然后,您將事件放置submit在更改事件中,這就是第一次顯示警告的原因,但是當您選擇某個復選框并再次單擊“保存”按鈕時,它不會消失(也是因為選擇器錯誤),所以我將其分開從變更事件來看。


另外,當選擇框值為ie 時,您忘記顯示tr您所擁有的:因此當值為 時添加到它。hide()2item-option.show()1


工作代碼:


$(".dynamicform_wrapper").on("change", "select", function() {


  if ($(this).val() == 2) {

    $('#0').find('.option-item').not(':first').remove(); //removed all entries found in

    $('#0').find('.option-item:first').hide();

    $('#0').find('.item-option').hide();

    $('#0').find('.question').attr('colspan', 2);

  } else if ($(this).val() == 1) {

    // $('#0').find('.container-options').append(newtr); //add input

    $('#0').find('.item-option').show();

    $('#0').find('.option-item:first').show(); //show option-item which is hidden

    $('#0').find('.question').removeAttr('colspan', 2);


  }

});


$("#dynamic-form").submit(function(event) {

  //getting all inputs which is under tr 

  var numberChecked = $('#0').find('input[type="checkbox"]:checked').length;

  console.log("No of checkbox checked=" + numberChecked)

  if (numberChecked > 0) {

    $('#0').find('.text-error-check').hide();

    $('#0').find('.dynamicform_inner').removeAttr("style");

     event.preventDefault();//remove this to submit

  } else {

    $('#0').find('.text-error-check').show();

    $('#0').find('.dynamicform_inner').css({

      'border': '2px solid #dd4b39',

      'background-color': 'white'

    });

    event.preventDefault();

  

  }

   

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<form id="dynamic-form" action="" method="post">

  <div class="content">

    <div class="box box-success box-solid">

      <div class="box-header with-border">

        <h3 class="box-title">Evaluation</h3>

      </div>

      <div class="panel-body">

        <div class="dynamicform_wrapper"> //where select and change applies

          <table class="table table-bordered table-striped">

            <thead>

              <tr>

                <th>Questions</th>

                <th style="width: 500px;">Options</th>

                <th class="text-center" style="width: 90px;">

                  <button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>

                </th>


              </tr>

            </thead>

            <tbody class="container-items">

              <tr id="0" class="item">//ID that I use to find the elements


                <td class="question"> //where do i apply colspan

                  <table class="table table-bordered table-striped">

                    <tbody>

                      <tr>

                        <td class="vcenter">

                          <span class="panel-title-address">Nr: 1</span>

                        </td>

                        <td class="vcenter">

                          <input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">

                          <div class="form-group field-qquestion-0-type_id required">

                            <label class="control-label" for="qquestion-0-type_id">Question Type</label>

                            <select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">

                              <option value="">-- Select --</option>

                              <option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1

                              <option value="2">OPEN QUESTION</option> // OPTION 2

                            </select>

                            <p class="help-block help-block-error"></p>

                          </div>

                          <div class="form-group field-qquestion-0-title required">

                            <input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">

                            <p class="help-block help-block-error"></p>

                          </div>

                          <div class="form-group field-qquestion-0-score required">

                            <input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">

                            <p class="help-block help-block-error"></p>

                          </div>

                          <div class="form-group field-qquestion-0-image">

                            <label class="control-label" for="qquestion-0-image">Image</label>

                            <input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">

                            <p class="help-block help-block-error"></p>

                          </div>

                          <div class="form-group field-qquestion-0-justify_answer">

                            <div class="checkbox">

                              <label style="padding:5px;" for="qquestion-0-justify_answer">

                                                            <input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">

                                                            Do you want the answer to be justified?

                                                            </label>

                              <p class="help-block help-block-error"></p>


                            </div>

                          </div>

                        </td>

                        <td class="clearfix"></td>

                      </tr>

                    </tbody>

                  </table>

                </td>

                <td class="item-option">

                  <div class="dynamicform_inner">

                    <table class="table table-bordered">

                      <thead>

                        <tr>

                          <th>Description</th>

                          <th class="text-center">

                            <button type="button" class="add-option btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>

                          </th>

                        </tr>

                      </thead>

                      <tbody class="container-opciones">

                        <tr class="option-item">

                          <td class="vcenter">

                            <input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">

                            <div class="input-group">

                              <span class="input-group-addon">

                                                                <div class="form-group field-qoption-0-0-opcion_correcta required">

                                                                    <div class="checkbox">

                                                                        <label style="padding:5px;" for="qoption-0-0-opcion_correcta">

                                                                            <input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">

                                                                        </label>

                                                                        <p class="help-block help-block-error"></p>

                                                                    </div>

                                                                </div>                    

                                                            </span>

                              <div class="form-group field-qoption-0-0-title_option required">

                                <input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">

                                <p class="help-block help-block-error"></p>

                              </div>

                            </div>

                          </td>

                          <td class="text-center vcenter" style="width: 90px;">

                            <button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>

                          </td>


                        </tr>


                      </tbody>

                    </table>

                  </div>

                  <div class="form-group text-error-check required has-error" style="display: none;">

                    <p class="help-block help-block-error">You must select at least 1 option as correct.</p>

                  </div>

                </td>

                <td class="text-center vcenter" style="width: 90px; verti">

                  <button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>

                </td>

              </tr>

            </tbody>

          </table>

        </div>

      </div>

    </div>

  </div>

  <div class="form-group">

    <button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>

  </div>


  <br>

  <br>

  <br>

  <br>


查看完整回答
反對 回復 2023-10-15
  • 1 回答
  • 0 關注
  • 129 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號