使用jQuery切换DOM元素

时间：2014-12-18 16:31:09

标签： javascript jquery html regex

更新

我已使用Igor's Answer中的一些提示并搜索stackoverflow，将类型集成到会员注册中。它不能按预期工作，除了第一个成员类型select其他成员类型select元素未触发 registrationTypeChange 函数。因此，第一个成员的类型工作正常，而其他成员没有按预期显示。

注意：第一个成员的选择在Chrome和IE中按预期工作，但在Firefox中不起作用

截图

member type year

member type period

正如您所看到的，当第二个成员的类型更改为“句点”时，相关元素不会显示，它应该与第一个成员类似，因为它们都是“句点”类型。我已经检查了我用来查找id中的数字的正则表达式，它可以正常工作（Fiddle）。我猜错误可能是函数 registrationTypeChange 。有人可以帮我修复代码在所有浏览器中按预期工作吗？

Fiddle

HTML 

<div class="row">
    <fieldset class="frame-border">
        <legend class="frame-border">Members Registration</legend>
        <div class="alert alert-warning alert-dismissible" role="alert" id="memberMinAlert">
            <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

            </button>Minimum one member is required.</div>
        <div class="row">
            <div class="form-group-sm required">
                <label class="col-xs-2 col-md-2"></label>
                <label class="control-label col-xs-2 col-md-3">Name</label>
                <label class="control-label col-xs-2 col-md-2">Type</label>
            </div>
            <div class="form-group-sm">
                <label class="control-label col-xs-2 col-md-2">1st Parameter</label>
                <label class="control-label col-xs-2 col-md-2">2nd Parameter</label>
            </div>
            <div class="col-xs-2 col-md-1"> <span class="glyphicon glyphicon-plus-sign big" id="memberAdd" data-toggle="popover" data-placement="right" title="Click to add a member."></span>
 <span class="glyphicon glyphicon-minus-sign big" id="memberRemove" data-toggle="popover" data-placement="right" title="Click to remove a member."></span>

            </div>
        </div>
        <div class="member-template">
            <div class="row">
                <div class="form-group-sm required">
                    <label class="control-label col-xs-2 col-md-2" id="registrationMemberLabel">Member</label>
                    <div class="col-xs-2 col-md-3"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the member."></span> 
                        <input type="text" id="registrationMemberName" class="form-control" placeholder="Enter Name">
                    </div>
                    <div class="col-xs-2 col-md-2"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of the membership."></span>

                        <select id="registrationMemberType" class="type-selector form-control">
                            <option value="yearly" selected="selected">Yearly</option>
                            <option value="period">Period</option>
                        </select>
                    </div>
                    <div class="col-xs-2 col-md-2"> <span class="help glyphicon glyphicon-info-sign" id="registrationMemberParam1Help" data-toggle="popover" data-placement="right" title="Help"></span>

                        <input type="number" id="registrationMemberParam1" name="registrationMemberParam1" class="form-control" min="2014" max="3000" step="1" placeholder="Name">
                    </div>
                    <div class="col-xs-2 col-md-2"> <span class="help glyphicon glyphicon-info-sign" id="registrationMemberParam2Help" data-toggle="popover" data-placement="right" title="Help"></span>

                        <input type="number" id="registrationMemberParam2" name="registrationMemberParam2" class="form-control" min="2015" max="3000" step="1 " placeholder="Name">
                    </div>
                </div>
            </div>
        </div>
        <div id="memberContainer"></div>
    </fieldset>
</div>

的JavaScript 

function registrationTypeChange(memberNum) {
    var theValue = $('#registrationMember' + memberNum + 'Type').find("option:selected").text();
    if (theValue === "Yearly") {
        $('#registrationMember' + memberNum + 'Param1Help').attr("title", "Please provide the year of membership");
        $('#registrationMember' + memberNum + 'Param1').attr("placeholder", "Year");
        $('#registrationMember' + memberNum + 'Param2').hide();
        $('#registrationMember' + memberNum + 'Param2Help').hide();
    } else if (theValue === "Period") {
        $('#registrationMember' + memberNum + 'Param1Help').attr("title", "Please provide the starting year of membership");
        $('#registrationMember' + memberNum + 'Param1').attr("placeholder", "From");
        $('#registrationMember' + memberNum + 'Param2Help').attr("title", "Please provide the ending year of membership");
        $('#registrationMember' + memberNum + 'Param2').attr("placeholder", "To");
        $('#registrationMember' + memberNum + 'Param2').show();
        $('#registrationMember' + memberNum + 'Param2Help').show();
    }
}

function addMember() {
    var memberNum = $('.member').length + 1;
    var $html = $('.member-template').clone();
    $html.find('[id=registrationMemberLabel]').html("Member" + memberNum);
    $html.find('[id=registrationMemberLabel]').attr("id", "registrationMember" + memberNum + "Label");
    $html.find('[id=registrationMemberName]').attr("id", "registrationMember" + memberNum + "Name");
    $html.find('[id=registrationMemberType]').attr("id", "registrationMember" + memberNum + "Type");
    $html.find('[id=registrationMemberParam1]').attr("id", "registrationMember" + memberNum + "Param1");
    $html.find('[id=registrationMemberParam1Help]').attr("id", "registrationMember" + memberNum + "Param1Help");
    $html.find('[id=registrationMemberParam2]').attr("id", "registrationMember" + memberNum + "Param2");
    $html.find('[id=registrationMemberParam2Help]').attr("id", "registrationMember" + memberNum + "Param2Help");
    return $html.html();
}

function removeMember() {
    var memberNum = $('.member').length;
    if (memberNum > 1) {
        document.getElementById("registrationMember" + memberNum).remove();
    } else {
        $("#memberMinAlert").alert();
        $("#memberMinAlert").fadeTo(2000, 500).slideUp(500, function () {
            $("#memberMinAlert").alert('close');
        });
    }
}

function addMemberHTML() {
    $('<div/>', {
        'class': 'member',
            'id': 'registrationMember' + ($('.member').length + 1),
        html: addMember()
    }).appendTo('#memberContainer');
    registrationTypeChange($('.member').length);
}

$(function () {
    addMemberHTML();
    registrationTypeChange(1);
    $("#memberMinAlert").hide();
    $('#memberAdd').click(function () {
        addMemberHTML();
    });
    $('#memberRemove').click(function () {
        removeMember();
    });
    $(".type-selector").change(function () {
        var re = /(?:\d+)/;
        var num = event.target.id.match(re);
        registrationTypeChange(num);
    });
});

我需要在动态元素集中动态管理表单元素。例如，我有一个会员表单，通过单击图标来动态管理输入（添加，删除和更改属性）。（加上和减去删除）是基于this帖子设计的。

member registration

会员注册中的类型 select通过更改选项动态管理一些元素（显示，隐藏和更改属性）。

member type

member type

HTML 

<div class="row">
    <fieldset class="frame-border">
        <legend class="frame-border">Type</legend>
        <div class="row">
          <div class="form-group-sm required">              
            <label class="control-label col-xs-4 col-md-4">Type</label>
            <label class="col-xs-4 col-md-4">1st Parameter</label>
            <label class="col-xs-4 col-md-4">2nd Parameter</label>
          </div>
        </div>
          <div class="row">
          <div class="form-group-sm required">
      <div class="col-xs-4 col-md-4">
      <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of Membership."></span>  
        <select id="registrationMemberTypeSample" class="form-control" >
          <option value="yearly" selected="selected">Yearly</option>
          <option value="period">Period</option>
        </select>
      </div>
      <div class="col-xs-4 col-md-4">
            <span class="help glyphicon glyphicon-info-sign" id="registrationMemberParam1Help" data-toggle="popover" data-placement="right" title="Help"></span>
            <input type="number" id="registrationMemberParam1" name="registrationMemberParam1" class="form-control" min="2014" max="3000" step="1" placeholder="Name">
          </div>
      <div class="col-xs-4 col-md-4">
            <span class="help glyphicon glyphicon-info-sign" id="registrationMemberParam2Help" data-toggle="popover" data-placement="right" title="Help"></span>
            <input type="number" id="registrationMemberParam2" name="registrationMemberParam2" class="form-control" min="2015" max="3000" step="1 "placeholder="Name">
      </div>
      </div>
      </div>
      </fieldset>
    </div>
    <div class="row">
      <fieldset class="frame-border">
        <legend class="frame-border">Members Registration</legend>
        <div class="alert alert-warning alert-dismissible" role="alert" id="memberMinAlert">
          <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          Minimum one member is required.
        </div>
        <div class="row">
          <div class="form-group-sm required">
            <label class="col-xs-3 col-md-3"> </label>                
            <label class="control-label col-xs-4 col-md-4">Name</label>
            <label class="control-label col-xs-3 col-md-3">Type</label>
          </div>
          <div class="col-xs-2 col-md-2">
            <span class="glyphicon glyphicon-plus-sign big" id="memberAdd" data-toggle="popover" data-placement="right" title="Click to add a member."></span>
            <span class="glyphicon glyphicon-minus-sign big" id="memberRemove" data-toggle="popover" data-placement="right" title="Click to remove a member."></span>
          </div>
        </div>
        <div class="member-template">
          <div class="row">
            <div class="form-group-sm required">
              <label class="control-label col-xs-3 col-md-3" id="registrationMemberLabel">Member</label>
              <div class="col-xs-4 col-md-4">
                <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the member."></span>                      
                <input type="text" id="registrationMemberName" class="form-control" placeholder="Enter Name"> 
              </div>
              <div class="col-xs-3 col-md-3">
              <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of the membership."></span>
                <select id="registrationMemberType" class="form-control" >
                  <option value="yearly" selected="selected">Yearly</option>
                  <option value="period">Period</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div id="memberContainer"></div>
      </fieldset>
    </div>

的JavaScript 

function registrationTypeChange() {
     var theValue = $("#registrationMemberTypeSample").find("option:selected").text();
     if(theValue === "Yearly" )
         {
         $('#registrationMemberParam1Help').attr("title","Please provide the year of membership");
         $('#registrationMemberParam1').attr("placeholder","Year");
         $('#registrationMemberParam2').hide();
         $('#registrationMemberParam2Label').hide();
         $('#registrationMemberParam2Help').hide();
         }
     else if(theValue === "Period" )
     {
     $('#registrationMemberParam1Help').attr("title","Please provide the starting year of membership");
     $('#registrationMemberParam1').attr("placeholder","From");
     $('#registrationMemberParam2Help').attr("title","Please provide the ending year of membership");
     $('#registrationMemberParam2').attr("placeholder","To");
     $('#registrationMemberParam2').show();
     $('#registrationMemberParam2Help').show();
     $('#registrationMemberParam2Label').show();
     }
}
function addMember() {
  var memberNum = $('.member').length+1;
  var $html = $('.member-template').clone();
  $html.find('[id=registrationMemberLabel]').html("Member" + memberNum);
  $html.find('[id=registrationMemberLabel]').attr("id", "registrationMember" + memberNum + "Label");
  $html.find('[id=registrationMemberName]').attr("id", "registrationMember" + memberNum + "Name");
  $html.find('[id=registrationMemberType]').attr("id", "registrationMember" + memberNum + "Type");
  return $html.html();
}

function removeMember() {
  var memberNum = $('.member').length;
   if(memberNum > 1 ) {
  document.getElementById("registrationMember" + memberNum).remove();
   }
   else {
       $("#memberMinAlert").alert();
       $("#memberMinAlert").fadeTo(2000, 500).slideUp(500, function(){
       $("#memberMinAlert").alert('close');
       });   
   }
}

function addMemberHTML(){
     $('<div/>', {
         'class' : 'member', 'id' :'registrationMember'+($('.member').length+1), html: addMember()
     }).appendTo('#memberContainer'); 
}

 $(function () {
     registrationTypeChange();
     addMemberHTML();
     $("#memberMinAlert").hide();
     $('#memberAdd').click(function () {
         addMemberHTML();   
    });
     $('#memberRemove').click(function () {
         removeMember();   
    });
     $("#registrationMemberTypeSample").change(function() {
            registrationTypeChange();
        });
     });

JS Fiddle

现在我需要帮助将类型集成到所有成员行的成员注册中。我不知道要实现这个目标。任何人都可以指导我如何做到这一点吗？

1 个答案:

答案 0 :(得分：1)

准则：

  1. registrationTypeChange()可以很好地管理某些字段。
  2. 在会员注册中，您创建选择器为其指定特殊类，例如。 <select class="type-selector" >

  3. 在该课程中，您使用on()方法，例如

    （'。type_selector'）。on（'change'，function {...做更改其他输入的东西}）。

  4. 在此函数function{... do stuff to change other parameters })内部，this（或$(this)）应引用用户现在更改的特定类型选择器（有关更多许可，请参阅文档）。因此，您使用jquery跟踪其兄弟姐妹/父母，例如：$(this).siblings(<selector optional>)因此只能在此给定行中更改/添加其他参数设置。

    5. 随意询问是否smth。目前尚不清楚。

    更新

    第4点：

    您的模板：

     <div class="member-template">
      <div class="row">
        <div class="form-group-sm required">
          <label class="control-label col-xs-3 col-md-3" id="registrationMemberLabel">Member</label>
          <div class="col-xs-4 col-md-4">
            <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the member."></span>                      
            <input type="text" id="registrationMemberName" class="form-control" placeholder="Enter Name"> 
          </div>
          <div class="col-xs-3 col-md-3">
          <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of the membership."></span>
            <select id="registrationMemberType" class="form-control" >
              <option value="yearly" selected="selected">Yearly</option>
              <option value="period">Period</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    • $(this).parent('span')将保留select元素（<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of the membership."></span>）
      • 的父span
    • $(this).parents('.row')将会为所有父母提供班级row，在我们的情况下，它是此行中的最高家长;见parents() of jquery
    • $(this).parents('.row').children('input')将保留input元素。见children() of jquery。顺便说一句，输入的id应该是唯一的，因为这些行会有多个。
    • 有了这个输入你可以随意处理它（改变类型，克隆等）

    我没有测试它，所以你做了微小的步骤和console.log（）或console.dir（）所选的元素。

    更新2

    这里是在类型选择器更改上调用registrationTypeChange（）的地方：

    $(".type-selector").change(function () {
    var re = /(?:\d+)/;
    var num = event.target.id.match(re);
    registrationTypeChange(num);
});

    因为这些type selectors具有动态性：

      

    它不起作用，因为它最初没有包含在页面初始化中。

    因此，您需要通过以下jquery on()方法来实现其功能：

      

    为现在和将来与当前选择器匹配的所有元素附加事件处理程序。

    请参阅my answer's update section此类案例。

    试试这个：

    $(".type-selector").on('change', function () {
    var re = /(?:\d+)/;
    var num = event.target.id.match(re);
    registrationTypeChange(num);
});

    更新3

    从answer开始，它指出此on方法需要一个选择器参数

      

    否则事件是直接绑定而不是委托，只有在元素已经存在时才有效（因此它不适用于动态加载的内容）

    所以绑定的代码应该是

    JQuery(document).on('change', ".type-selector" ,function () {
    ...
});
相关问题
最新问题