Question

我想忘记密码页面。页面可以使用电子邮件或短信，我想要选择按钮选择另一个。可以帮帮我吗？

这是我的观点

<?xml version="1.0" encoding="utf-8"?>
<stamps>
<StampGroup id="25">
  <stamp>
     <Scott>3133</Scott>
     <Title>32¢ Thornton Wilder</Title>
     <Minor/>
  </stamp>
</StampGroup>
<StampGroup id="26">
  <stamp>
     <Scott>3134</Scott>
     <Title>32¢ Charlie Chaplin</Title>
     <Minor/>
  </stamp>
  <stamp>
     <Scott>3135</Scott>
     <Title>32¢ Raoul Wallenberg</Title>
     <Minor/>
  </stamp>
</StampGroup>
<StampGroup id="27">
  <stamp>
     <Scott>3136</Scott>
     <Title>Sheet of 15</Title>
     <Minor/>
  </stamp>
  <stamp>
     <Scott>3136</Scott>
     <Title>32¢ Ceratosaurus</Title>
     <Minor>a</Minor>       
  </stamp>
  <stamp>
     <Scott>3136</Scott>
     <Title>32¢ Camptosaurus</Title>    
     <Minor>b</Minor>       
  </stamp>
  <stamp>
     <Scott>3136</Scott>
     <Title>32¢ Camarasaurus</Title>
     <Minor>c</Minor>       
  </stamp>
 </StampGroup>
</stamps>

Answer 1

您可以通过多种方式实现这一目标。我告诉你第一个出现在我脑海里。此外，这取决于您希望如何使用UX。

<div class="form-group hidden">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-5 col-xxs">
            <label class="control-label">Select email or sms</label>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-5 col-xs-7 col-xxs">
            <select  class="form-control my-select" name="re_email">
                <option value="">Select One</option>
                <option value="email">Email</option>
                <option value="sms">SMS</option>
            </select>
        </div>
    </div>
</div>  
<div class="form-group hidden" id="email-input">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-5 col-xxs">
            <label class="control-label">Confirm Email Address</label>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-5 col-xs-7 col-xxs">
            <input placeholder="Email address." class="form-control" type="text" name="re_email" value="<?php echo input_data('re_email'); ?>">
                <?php echo form_error('re_email'); ?>
        </div>
    </div>
</div>  
 <div class="form-group hidden" id="sms-input">
    <div class="row">
        <div class=" 
             col-lg-offset-3 col-md-offset-3 col-sm-offset-4
             col-lg-9 col-md-9 col-sm-8
             ">
            <input type="submit" class="btn btn-sm btn-primary" value="Submit">
        </div>
    </div>
</div>

<style type="text/css">
    .hidden{display: none;}
</style>

<script type="text/javascript">

    $(document).ready(function() {
        $(document).on('change', '.my-select', function() {
            var selection = $(this).val();
            $('input[type=text]').addClass('hidden');
            $('#' + selection + '-input').removeClass('hidden');
        });
    });

</script>

首先，您需要一个带有2个选项的选择输入。然后给你的电子邮件和短信输入隐藏的类，这样他们就不会显示，直到用户选择选项（不要忘记实际应用隐藏类的样式元素）。然后jQuery .....获取选择输入的值并使用它来访问id属性输入的电子邮件或短信。使用jquery，首先在所有文本输入（电子邮件和短信）中添加隐藏类以隐藏它们，然后只显示选择的一个用户。

如果有帮助，请告诉我。

Answer 2

您可以选择两个单选按钮来选择通过电子邮件ID或短信：

$(document).ready(function() 
{
    $('input[type=radio][name=forgotpass]').change(function()
    {
      if (this.value == 'email') 
      {
        do something
      }
      else if (this.value == 'sms') 
      {
        do something
      }
    });
});

如何让jQuery选择onchange

2 个答案: