因此，动态JQuery的switch语句体积不大 [英] Making Dynamic JQuery Switch Statement Less Bulky
本文介绍了因此，动态JQuery的switch语句体积不大的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有它的几种形式PHP页面。约9总数，但我的例子只是反映了4简便起见。我终于得到了code成功地找到元素ID取决于哪个按钮被点击的形式，如果URL已正确添加到窗体验证，如果没有它会显示一个错误信息，并突出显示输入（而也是在span标签的div底部留下支持的错误信息。在code工作出色，任何人都被欢迎使用它，如果需要的话。我只是需要帮助凝结了。反正有做交换机体积不大？
===例HTML表单（有几个这样一个页面上）===
＆LT; DIV CLASS =缩略图＆GT; ＆LT;表ID =buyMe行动=＃的方法=后＆GT;
＆LT;输入类型=隐藏的名字=无值=＃＆GT;
＆LT;输入类型=隐藏的名字=＃＆GT;
＆LT;表ID =myTable的＆GT;
＆LT; TR＆GT;＆LT; TD＆GT;＆LT;选择一个id =选择NAME =OS0＆GT;
＆LT;期权价值=OPT1＆GT;选项1 LT; /选项＆GT;
＆LT;期权价值=OPT2＆GT;选项2'; /选项＆GT;
＆LT;期权价值=OPT3＆GT;选项3'; /选项＆GT;
＆LT;期权价值=OPT4＆GT;选项4℃; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / TD＆GT;＆LT; / TR＆GT;
＆LT; TR＆GT;＆LT; TD＆GT;＆LT;输入类型=隐藏ID =ON1NAME =ON1VALUE =这个称号＆gt;这一个标题＆LT; / TD＆GT;＆LT; / TR＆GT;
＆LT; TR＆GT;＆LT; TD＆GT;＆LT;输入ID =OS1类型=文本值=HTTP：//NAME =urlTextMAXLENGTH =200＆GT;＆LT; / TD＆GT;＆LT; / TR＆GT ;
＆LT; /表＆gt;
＆LT;输入类型=隐藏的名字=东西价值=东西＆GT;
＆LT;键ALT =tryThisID =purchase1NAME =提交级=BTN类型=形象＆GT;试试该＆lt; /按钮＆GT;
＆所述; IMG ALT =BORDER =0SRC =pixel.gif宽度=1高度=1＆GT;
＆LT; /表及GT;
＆LT;跨度ID =msgsText1＆GT;错误消息数显示此处＆lt; / SPAN＆GT;
＆LT; / DIV＆GT;
=== JQuery的SWITCH / CASE ==
//开关code开头
emptyerror2 =请输入一个有效的URL;
htmlEmpty =请使用正确的URL格式;
success2 =添加到购物车成功！;$（'：按钮'）。点击（函数（五）{
变种btns = [purchase1，purchase2，purchase3，purchase4];
对于（VAR I = 0，II = btns.length; I＆LT;二，我++）{
VAR的aTc = btns [I]
。VAR whatSpan = $（本）.parent（'＃buyMe'）nextAll（'跨'）EQ（0）.attr（'身份证'）;
VAR msgSpan = $（'＃'+ whatSpan）;
。VAR whoseInput = $（本）.siblings（'＃myTable的'）找到（'：输入'）方程（2）.attr（'身份证'）;
VAR myInput = $（'＃'+ whoseInput）;
如果（（e.target || e.srcElement）.ID == ATC）{
开关（ATC）{
案purchase1：
如果(!/(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?/.test(myInput.val())) {
myInput.addClass（errorAlert）;
myInput.val（emptyerror2）;
msgSpan.addClass（文字错误）;
msgSpan.html（htmlEmpty）;
返回false;
}其他{
myInput.removeClass（errorAlert）;
msgSpan.removeClass（文字错误）;
msgSpan.addClass（TEXT-成功）;
msgSpan.html（success2）;
返回true;
} //如果其他结束
打破;
案purchase2：
如果(!/(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?/.test(myInput.val())) {
myInput.addClass（errorAlert）;
myInput.val（emptyerror2）;
msgSpan.addClass（文字错误）;
msgSpan.html（htmlEmpty）;
返回false;
}其他{
myInput.removeClass（errorAlert）;
msgSpan.removeClass（文字错误）;
msgSpan.addClass（TEXT-成功）;
msgSpan.html（success2）;
返回true;
} //如果其他结束
打破;
案purchase3：
如果(!/(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?/.test(myInput.val())) {
myInput.addClass（errorAlert）;
myInput.val（emptyerror2）;
msgSpan.addClass（文字错误）;
msgSpan.html（htmlEmpty）;
返回false;
}其他{
myInput.removeClass（errorAlert）;
msgSpan.removeClass（文字错误）;
msgSpan.addClass（TEXT-成功）;
msgSpan.html（success2）;
返回true;
} //如果其他结束
打破;
案purchase4：
如果(!/(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?/.test(myInput.val())) {
myInput.addClass（errorAlert）;
myInput.val（emptyerror2）;
msgSpan.addClass（文字错误）;
msgSpan.html（htmlEmpty）;
返回false;
}其他{
myInput.removeClass（errorAlert）;
msgSpan.removeClass（文字错误）;
msgSpan.addClass（TEXT-成功）;
msgSpan.html（success2）;
返回true;
} //如果其他结束
打破;
} //开关结束
} //如果结束
} // for循环结束
}）; //按钮事件code端
解决方案
我不太清楚你所需要的循环或交换机在所有。在switch语句似乎都相同。跨度和投入都似乎被执行上下文来确定。关于究竟是什么：
$（'：按钮'）。点击（函数（五）{
。VAR whatSpan = $（本）.parent（'＃buyMe'）nextAll（'跨'）EQ（0）.attr（'身份证'）;
VAR msgSpan = $（'＃'+ whatSpan）;
。VAR whoseInput = $（本）.siblings（'＃myTable的'）找到（'：输入'）方程（2）.attr（'身份证'）;
VAR myInput = $（'＃'+ whoseInput）;
如果(!/(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?/.test(myInput.val())) {
myInput.addClass（errorAlert）;
myInput.val（emptyerror2）;
msgSpan.addClass（文字错误）;
msgSpan.html（htmlEmpty）;
返回false;
}其他{
myInput.removeClass（errorAlert）;
msgSpan.removeClass（文字错误）;
msgSpan.addClass（TEXT-成功）;
msgSpan.html（success2）;
返回true;
}
如果你担心'流浪'click事件（在页面上的其他按钮），给这四个独特的类。否则，好像你只是检查是否按钮的四分之一（在这里你可以知道它是），并无论哪个执行相同的验证。当然，我可能失去了一些东西！
I have a php page with several forms on it. About 9 in total but my example will only reflect 4 for the sake of brevity. I have finally gotten the code to successfully find element ids depending on which button was click on it's form and validates if the url has been added correctly to the form, if not it will show an error message and highlight the input (while also leaving a supporting error message at the bottom of the div in the span tag. The code works excellently and anyone is welcomed to use it, if needed. I would just need help in condensing it. Is there anyway to make the Switch less bulky?
===EXAMPLE FORM HTML (there are several of these on one page) ===
<div class="thumbnail">
<form id="buyMe" action="#" method="post">
<input type="hidden" name="none" value="#">
<input type="hidden" name="#">
<table id="myTable">
<tr><td><select id="select" name="os0">
<option value="opt1">option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
<option value="opt4">Option 4</option>
</select>
</td></tr>
<tr><td><input type="hidden" id="on1" name="on1" value="This Title">This One Title</td></tr>
<tr><td><input id="os1" type="text" value="http://" name="urlText" maxlength="200"></td></tr>
</table>
<input type="hidden" name="something" value="something">
<button alt="tryThis" id="purchase1" name="submit" class="btn" type="image">Try This</button>
<img alt="" border="0" src="pixel.gif" width="1" height="1">
</form>
<span id="msgsText1">Error Msgs appear here</span>
</div>
=== JQuery SWITCH/CASE ==
//BEGINNING OF SWITCH CODE
emptyerror2 = "Please enter a valid URL";
htmlEmpty = "Please use the proper URL format";
success2 = "Added to cart successfully!";
$(' :button').click(function (e) {
var btns = ["purchase1", "purchase2", "purchase3", "purchase4"];
for (var i = 0, ii = btns.length; i < ii; i++) {
var aTc = btns[i];
var whatSpan = $(this).parent('#buyMe').nextAll('span').eq(0).attr('id');
var msgSpan = $('#'+ whatSpan);
var whoseInput = $(this).siblings('#myTable').find(':input').eq(2).attr('id');
var myInput = $('#'+ whoseInput);
if ((e.target || e.srcElement).id == aTc) {
switch (aTc) {
case 'purchase1':
if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
myInput.addClass("errorAlert");
myInput.val(emptyerror2);
msgSpan.addClass("text-error");
msgSpan.html(htmlEmpty);
return false;
} else {
myInput.removeClass("errorAlert");
msgSpan.removeClass("text-error");
msgSpan.addClass("text-success");
msgSpan.html(success2);
return true;
} // end of if else
break;
case 'purchase2':
if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
myInput.addClass("errorAlert");
myInput.val(emptyerror2);
msgSpan.addClass("text-error");
msgSpan.html(htmlEmpty);
return false;
} else {
myInput.removeClass("errorAlert");
msgSpan.removeClass("text-error");
msgSpan.addClass("text-success");
msgSpan.html(success2);
return true;
} // end of if else
break;
case 'purchase3':
if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
myInput.addClass("errorAlert");
myInput.val(emptyerror2);
msgSpan.addClass("text-error");
msgSpan.html(htmlEmpty);
return false;
} else {
myInput.removeClass("errorAlert");
msgSpan.removeClass("text-error");
msgSpan.addClass("text-success");
msgSpan.html(success2);
return true;
} // end of if else
break;
case 'purchase4':
if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
myInput.addClass("errorAlert");
myInput.val(emptyerror2);
msgSpan.addClass("text-error");
msgSpan.html(htmlEmpty);
return false;
} else {
myInput.removeClass("errorAlert");
msgSpan.removeClass("text-error");
msgSpan.addClass("text-success");
msgSpan.html(success2);
return true;
} // end of if else
break;
}//end of switch
} //end of if
} // end of for loop
}); //end of button event code
解决方案
I'm not quite sure you need the loop or the switch at all. The switch statements all seem identical. The spans and inputs all seem to be determined by the execution context. What about just:
$(' :button').click(function (e) {
var whatSpan = $(this).parent('#buyMe').nextAll('span').eq(0).attr('id');
var msgSpan = $('#'+ whatSpan);
var whoseInput = $(this).siblings('#myTable').find(':input').eq(2).attr('id');
var myInput = $('#'+ whoseInput);
if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
myInput.addClass("errorAlert");
myInput.val(emptyerror2);
msgSpan.addClass("text-error");
msgSpan.html(htmlEmpty);
return false;
} else {
myInput.removeClass("errorAlert");
msgSpan.removeClass("text-error");
msgSpan.addClass("text-success");
msgSpan.html(success2);
return true;
}
If you are worried about 'stray' click events ( have other buttons on the page ), give these four a unique class. Otherwise, it seems like you are just checking if the button is one of four ( where you can know it is ) and performing the same validation no matter which. Of course, I could be missing something!
这篇关于因此，动态JQuery的switch语句体积不大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
