jQuery hide() 不适用于引导动态表单

Question

我在引导程序中有一个动态表单，我想根据选择向它添加具有不同字段的表单。如果选择的选项是球体，表格应该有直径、位置、颜色和材料字段，如果是三角形，则需要添加其他字段（如图所示）。我正在尝试使用 jQuery hide() 隐藏不需要添加的字段，但它不起作用。如果您让我知道我的代码有什么问题，我将不胜感激。

image of the form

html:

<div class="row" id="dynamic_form">
  <div class="form-group form-horizontal">
    <label class="control-label">Primitives</label>
    <div class="form-inline">
      <select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">
          <!-- <option value=" " disabled="" selected="">primitive</option> -->
          <option value="sphere">sphere</option>
          <option value="triangle">triangle</option>
      </select>
      <input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)">

      <input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)">

      <select class="input-small form-control" id="material-selector" name="MaterialSelect[]">
          <option value=" " disabled="" selected="">material</option>
          <option value="normal">opaque</option>
          <option value="glass">glass</option>
          <option value="mirror">mirror</option>
      </select>
      <select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]">
          <option value=" " disabled="" selected="">color</option>
          <option value="red">red</option>
          <option value="blue">blue</option>
          <option value="green">green</option>
          <option value="yellow">yellow</option>
      </select>

      <button type="button" class="btn btn-success btn-add" id="add_more"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
      </button>
    </div>
  </div>
</div>

javaScript：

function getHTMLString(formCount) {
    var complex_html = [
              '<div class="form-inline">',
                '<select class="input-small form-control" id="primitive-selector'+ formCount +'" name="PrimitiveChoose[]">',
                  '<option value=" " disabled selected>primitive</option>',
                  '<option value="sphere">sphere</option>',
                  '<option value="triangle">triangle</option>',
                '</select> ',
                '<input type="number" class="input-small form-control" id="diameter'+ formCount +'"  name="Diameter[]" step="any" placeholder="diameter(D)"> ',
                '<input type="text" class="input-small form-control"  id="sphere-position'+ formCount +'" name="SpherePosition[]"  placeholder="(x, y, z)"> ',
                '<input type="text" class="input-small form-control" id="A-position'+ formCount +'" name="VerticeAPosition[]" placeholder="(x, y, z)"> ',
                '<input type="text" class="input-small form-control" id="B-position'+ formCount +'" name="VerticeBPosition[]" placeholder="(x, y, z)"> ',
                '<input type="text" class="input-small form-control" id="C-position'+ formCount +'" name="VerticeCPosition[]" placeholder="(x, y, z)"> ',

                '<select class="input-small form-control" id="circle-color-selector'+ formCount +'" name="CircColorSelect[]">',
                  '<option value=" " disabled selected>color</option>',
                  '<option value="red">red</option>',
                  '<option value="blue">blue</option>',
                  '<option value="green">green</option>',
                  '<option value="yellow">yellow</option>',    
                '</select> ', 
                '<button type="button" class="btn btn-success btn-add" id="remove_more'+formCount+'"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>',
                '</button>',  
            '</div>',
    ].join('');
    return complex_html;
}
$(document).ready(function() {
    var formCount = 0;
    $('#add_more').on('click', function(e) {
        if (formCount < 4) { 
            var html = getHTMLString(formCount);
            var element = $(html);
            $('#dynamic_form  .form-group').append(html);
            $('#primitive-selector'+formCount).on('change', function(){
                if($(this).val() === "sphere"){
                    $('#A-position'+ formCount).hide();
                    $('#B-position'+ formCount).hide();
                    $('#C-position'+ formCount).hide();
                } else {
                    $('#diameter'+ formCount).hide();
                    $('#sphere-position'+ formCount).hide();
                }

            });

        } else {
            return;     
        }
        formCount++;
    });


    $('#dynamic_form').on("click","#remove_more"+formCount, function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); formCount--;

    });
});

Answer 1

改为添加更改事件处理程序：

$('#primitive-selector'+formCount).on('change', function(){

里面：

$('#add_more').on('click', function(e) {

您可以作为委托事件直接附加到文档：

$(document).on('change', '[id^=primitive-selector]', function(e) {
    var formCount = this.id.replace('primitive-selector', '');

    var TselectorString = '#A-position'+ formCount + ', #B-position'+ formCount +
            ', #C-position'+ formCount;
    var SselectorString = '#diameter'+ formCount + ', #sphere-position'+ formCount +
            ', #material-selector'+ formCount + ', #circle-color-selector'+ formCount
    var bIsS = $(this).val() === "sphere";
    $(SselectorString).toggle(bIsS);
    $(TselectorString).toggle(!bIsS);
});

以同样的方式你可以委托删除事件。

我使用了jQuery Attribute Starts With Selector [name^=”value”]，而不是按 id 寻址。

sn-p：

function getHTMLString(formCount) {
    var complex_html = [
        '<div class="form-inline">',
        '<select class="input-small form-control" id="primitive-selector'+ formCount +'" name="PrimitiveChoose[]">',
        '<option value=" " disabled selected>primitive</option>',
        '<option value="sphere">sphere</option>',
        '<option value="triangle">triangle</option>',
        '</select> ',
        '<input type="number" class="input-small form-control" id="diameter'+ formCount +'"  name="Diameter[]" step="any" placeholder="diameter(D)"> ',
        '<input type="text" class="input-small form-control"  id="sphere-position'+ formCount +'" name="SpherePosition[]"  placeholder="(x, y, z)"> ',
        '<input type="text" class="input-small form-control" id="A-position'+ formCount +'" name="VerticeAPosition[]" placeholder="(x, y, z)"> ',
        '<input type="text" class="input-small form-control" id="B-position'+ formCount +'" name="VerticeBPosition[]" placeholder="(x, y, z)"> ',
        '<input type="text" class="input-small form-control" id="C-position'+ formCount +'" name="VerticeCPosition[]" placeholder="(x, y, z)"> ',

        '<select class="input-small form-control" id="material-selector'+ formCount +'" name="MaterialSelect[]">',
        '<option value=" " disabled="" selected="">material</option>',
        '<option value="normal">opaque</option>',
        '<option value="glass">glass</option>',
        '<option value="mirror">mirror</option>',
        '</select>',

        '<select class="input-small form-control" id="circle-color-selector'+ formCount +'" name="CircColorSelect[]">',
        '<option value=" " disabled selected>color</option>',
        '<option value="red">red</option>',
        '<option value="blue">blue</option>',
        '<option value="green">green</option>',
        '<option value="yellow">yellow</option>',
        '</select> ',
        '<button type="button" class="btn btn-success btn-add" id="remove_more'+formCount+'"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>',
        '</button>',
        '</div>',
    ].join('');
    return complex_html;
}

var formCount = 0;

$(document).on("click", "[id^=remove_more]", function(e){ //user click on remove text
    e.preventDefault();
    $(this).closest('div.form-inline').remove();
    formCount--;
});


$(document).on('change', '[id^=primitive-selector]', function(e) {
    if (this.id == 'primitive-selector') {
        //return;
    }
    var formCount = this.id.replace('primitive-selector', '');

    var TselectorString = '#A-position'+ formCount + ', #B-position'+ formCount +
            ', #C-position'+ formCount;
    var SselectorString = '#diameter'+ formCount + ', #sphere-position'+ formCount +
            ', #material-selector'+ formCount + ', #circle-color-selector'+ formCount
    var bIsS = $(this).val() === "sphere";
    $(SselectorString).toggle(bIsS);
    $(TselectorString).toggle(!bIsS);
});


$(document).ready(function() {
    $('[name^="VerticeCPosition"]').hide();
    $('#add_more').on('click', function(e) {
        if (formCount < 4) {
            var html = getHTMLString(formCount);
            var element = $(html);
            $('#dynamic_form  .form-group').append(html);
        } else {
            return;
        }
        formCount++;
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row" id="dynamic_form">
    <div class="form-group form-horizontal">
        <label class="control-label">Primitives</label>
        <div class="form-inline">
            <select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">
                <!-- <option value=" " disabled="" selected="">primitive</option> -->
                <option value="sphere">sphere</option>
                <option value="triangle">triangle</option>
            </select>
            <input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)">

            <input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)">

            <input type="text" class="input-small form-control" id="A-position" name="VerticeAPosition[]" placeholder="(x, y, z)">
            <input type="text" class="input-small form-control" id="B-position" name="VerticeBPosition[]" placeholder="(x, y, z)">
            <input type="text" class="input-small form-control" id="C-position" name="VerticeCPosition[]" placeholder="(x, y, z)">

            <select class="input-small form-control" id="material-selector" name="MaterialSelect[]">
                <option value=" " disabled="" selected="">material</option>
                <option value="normal">opaque</option>
                <option value="glass">glass</option>
                <option value="mirror">mirror</option>
            </select>
            <select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]">
                <option value=" " disabled="" selected="">color</option>
                <option value="red">red</option>
                <option value="blue">blue</option>
                <option value="green">green</option>
                <option value="yellow">yellow</option>
            </select>

            <button type="button" class="btn btn-success btn-add" id="add_more"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            </button>
        </div>
    </div>
</div>

Answer 2

hide() 方法工作正常，你的逻辑是错误的。

$(document).ready(function() {
    var formCount = 0;
    $('#add_more').on('click', function(e) {
        formCount++;
        if (formCount < 4) { 
            var html = getHTMLString(formCount);
            var element = $(html);
            $('#dynamic_form  .form-group').append(html);
            $(document).on('change','#primitive-selector'+formCount-1, function(){
                console.log('change...' + $(this).val() + ' ' + '#A-position'+ formCount);
                if($(this).val() === "sphere"){
                    $('#A-position'+ formCount).hide();
                    $('#B-position'+ formCount).hide();
                    $('#C-position'+ formCount).hide();
                } else {
                    $('#diameter'+ formCount).hide();
                    $('#sphere-position'+ formCount).hide();
                }

            });

        } else {
            return;     
        }
    });

看看下面的小提琴。它适用于您提供的代码和所做的更正。 https://jsfiddle.net/hdp513yq/