Question

我有两个输入字段和一个提交按钮（显示为内联）。在填写输入字段后，我正在尝试向下一个兄弟添加一个类。因此，如果填写了第一个名称输入字段，则在电子邮件输入字段中添加一个类，如果填写了电子邮件输入字段，则将类添加到下一个输入字段，依此类推......

到目前为止，这是我的代码：

$('.form-display #mce-FNAME').blur(function() {
     if($.trim(this.value).length) {
        $('#mce-EMAIL').toggleClass('animated pulse');
     }else if(...){ }...
});

我的HTML看起来像这样：

<div class="form-display">
    <div class="mc-field-group">
        <label for="mce-FNAME">First Name </label>
        <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
    </div>
    <div class="mc-field-group">
        <label for="mce-EMAIL">Email Address </label>
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    </div>
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Answer 1

将除提交按钮以外的所有输入抓取到集合中。

在输入时，根据当前输入是否具有值来切换下一个输入的类：

var inputs = $('.form-display input').not(':submit');

inputs.on('input', function() {
  $(inputs[inputs.index(this) + 1]).toggleClass('animated pulse', this.value > '');
});

Fiddle

<强>段：

＆＃13;

var inputs = $('.form-display input').not(':submit');  //all inputs except submit button

inputs.on('input', function() {
  $(inputs[inputs.index(this) + 1]).toggleClass('animated pulse', this.value > '');
});

＆＃13;

.animated.pulse {
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-display">
  <div class="mc-field-group">
    <label for="mce-FNAME">First Name </label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
  </div>
  <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="mc-field-group">
    <label for="mce-CITY">City </label>
    <input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="mc-field-group">
    <label for="mce-STATE">State </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="mc-field-group">
    <label for="mce-ZIP">Zip </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

＆＃13;

Answer 2

<强> Working Fiddle

最好使用事件restartCanvas = (GameObject)Instantiate(prefab);和blur事件来跟踪用户在输入字段上的更改，然后在检查模糊输入是否为input和parents()之后使用空，检查下面的例子。

希望这有帮助。

＆＃13;

next()

＆＃13;

$('body').on('input blur', '.form-display .mc-field-group input',function() {
  if(!$.trim($(this).val()))
  {
    $(this).parents('.mc-field-group').next('.mc-field-group')
           .find('input').addClass('animated pulse');
  }else{
    $(this).parents('.mc-field-group').next('.mc-field-group')
           .find('input').removeClass('animated pulse');
  }
});

＆＃13;

.animated.pulse {
  color: red;
}

＆＃13;

Answer 3

这是一个在所有输入中查找当前输入的函数，然后找到下一个空输入并添加下一个类：

$('input').blur(function() {
     if($.trim(this.value).length) {
       var allInputs = $('input');
       var hasFoundNext = false;
       currentInputIndex = $('input').index(this);

       for (index = currentInputIndex + 1; (index < allInputs.length && !hasFoundNext); index++) {
          if(!$.trim(allInputs[index].value).length) {
            allInputs.eq(index).addClass('next');
            hasFoundNext = true;
          }
       }
     }
});

Jsfiddle：https://jsfiddle.net/wed0104o/

Answer 4

你非常接近，模糊事件是执行此操作的正确方法。

这是一个可供您查看的工作示例。

＆＃13;

$(function() {
  $('form[name=siblings] input').on('keyup', function(e) {
    var className = $(this).attr('name') + "-has-value"; //unique class name
    if ($(this).val().match(/.{3,}/)) { //regex to check value - check length of match
      $(this).next().addClass(className); //add class to next
    } else {
      $(this).next().removeClass(className); //remove class from next
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="siblings">
  <input name="name" type="text" placeholder="name" />
  <input name="email" type="email" placeholder="email" />
  <input name="etc" type="text" placeholder="etc..." />
</form>

＆＃13;

Answer 5

https://jsfiddle.net/sq1mx1rm/

粗略的做法，父（）可能很重。

public static string ChangeNumericalPropertyNames(JsonReader reader)
{
    JObject jo = JObject.Load(reader);
    ChangeNumericalPropertyNames(jo);
    return jo.ToString();
}

public static void ChangeNumericalPropertyNames(JObject jo)
{
    foreach (JProperty jp in jo.Properties().ToList())
    {
        if (jp.Value.Type == JTokenType.Object)
        {
            ChangeNumericalPropertyNames((JObject)jp.Value);
        }
        else if (jp.Value.Type == JTokenType.Array)
        {
            foreach (JToken child in jp.Value)
            {
                if (child.Type == JTokenType.Object)
                {
                    ChangeNumericalPropertyNames((JObject)child);
                }
            }
        }

        if (Regex.IsMatch(jp.Name, @"^\d"))
        {
            string name = "n" + jp.Name;
            jp.Replace(new JProperty(name, jp.Value));
        }
    }
}

Answer 6

1）为每个输入添加onchange属性。 2）在JS文件中，创建一个全局输入集合。 3）在changed（）函数中找到已更改输入的索引。 4）更改下一个输入的类别。

Answer 7

如果您可以修改HTML，我会为您要定位的所有输入字段添加一个类，否则您可能会被隐藏字段或您不想要定位的其他输入所绊倒。

$(document).ready(function(){
    var fieldlist = $('.pulsefield');

    fieldlist.bind('blur', function(){
        var currentElement = $(this);
        if(currentElement.val().length>1){
            var currentIndex = fieldlist.index(currentElement);
            if(currentIndex+1<fieldlist.length){
                var nextElement = $(fieldlist.get(currentIndex+1));
                nextElement.toggleClass('animated pulse');
            }
        }
    });
})

Answer 8

这应该在您通过表单时尚未填写的下一个兄弟字段上设置脉冲动画。

fieldlist = $('.form-display input');

fieldlist.on('input onpropertychange', function() {
     if ( $(this).val().length ) {
            $(this).removeClass('animated pulse');
            if(( fieldlist.index($(this)) + 1 ) < fieldlist.length - 1){
              target = $(fieldlist.get(fieldlist.index($(this))+1));
                if ( target.val().length === 0 ) {
                  target.addClass('animated pulse');
                }
            }
     }
});

$('.form-display input').first().addClass('pulse');
$('.form-display input').first().focus();

@keyframes pulse_animation {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(0.95); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(0.95); }
	80% { transform: scale(1); }
	100% { transform: scale(1); }
}

.pulse {
	animation-name: pulse_animation;
	animation-duration: 500ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-display">
  <div class="mc-field-group">
    <label for="mce-FNAME">First Name</label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME" tabindex=1>
  </div>
  <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="mc-field-group">
    <label for="mce-PHONE">Phone Number</label>
    <input type="phone" value="" name="PHONE" class="required" id="mce-PHONE">
  </div>
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

检查输入字段的值并添加一个类

8 个答案: