有人可以简化这个JS代码吗?

时间:2017-11-01 13:17:45

标签: javascript jquery

将其简化为ELSE IF或Case Statement或任何可以使其更简单的内容。谢谢!

   $(function() {
    $('#Class').change(function() { 
     $('#YearLevel,#Dept,#Course,#SY,#Section,#Subject,#appointment').val('');
      this.form.submit();
    });
});

   $(function() {
    $('#YearLevel').change(function() { 
     $('#Dept,#Course,#SY,#Section,#Subject,#appointment').val('');
      this.form.submit();
    });
});

   $(function() {
    $('#Dept').change(function() {  
     $('#Course,#SY,#Section,#Subject,#appointment').val('');
      this.form.submit();
    });
});

 etc...

2 个答案:

答案 0 :(得分:1)

试试这个。它应该做你想要的。

var t = '#Class,#YearLevel,#Dept,#Course,#SY,#Section,#Subject,#appointment'

$(function() {
  $(t).change(function() {
    var id = "#" + this.id;
    var s = t.split(id);
    s = s[1].match("^,") == null ? s[1] : s[1].substring(1, s[1].length)
    $(s).val('');
    //this.form.submit();
  });
});

<强>演示

var t = '#Class,#YearLevel,#Dept,#Course,#SY,#Section,#Subject,#appointment'

$(function() {
  $(t).change(function() {
    var id = "#" + this.id;
    var s = t.split(id);
    s = s[1].match("^,") == null ? s[1] : s[1].substring(1, s[1].length)
    $(s).val('');
    //this.form.submit();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Class" />
<input id="YearLevel" />
<input id="Dept" />
<input id="Course" />
<input id="SY" />
<input id="Section" />
<input id="Subject" />
<input id="appointment" />

答案 1 :(得分:1)

因为根据你的评论,文档中有一个隐含的顺序,你可以简单地给每个元素一个公共类,然后选择那些元素来绑定同一个处理程序。

在处理程序中,您从接收事件的元素之后的元素开始处理元素的子元素,并使用它来设置值。

$(function() {
  var elems = $(".myClass").change(function() {
    elems.slice($.inArray(this, elems)+1).val("");
    // this.form.submit();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input class="myClass" id="Class" />
    <input class="myClass" id="YearLevel" />
    <input class="myClass" id="Dept" />
    <input class="myClass" id="Course" />
    <input class="myClass" id="SY" />
    <input class="myClass" id="Section" />
    <input class="myClass" id="Subject" />
    <input class="myClass" id="appointment" />
</form>

如果你不能修改HTML来提供一个公共类,你可以简单地将ID列表放回到.myClass目前所在的位置,它的工作方式也是一样的。