从输入属性自动构建选择器
Build a selector automatically from inputs attributes
我正在开发一个类似于网站构建器的生成器,我从输入字段的名称属性中获取值并将其发送给编辑器。我不知道如何编写代码并使其更干净。
case 'icons':
var style = jQuery('[name="icons_icon"]').val();
var size = jQuery('[name="icons_size"]').val();
var color = jQuery('[name="icons_color"]').val();
if (style !== '') {
style = ' style="' + style + '"';
}
if (size !== '') {
size = ' size="' + size + '"';
}
if (color !== '') {
color = ' color="' + color + '"';
}
return ''n[icons' + style + size + color + ']'n';
break;
case 'googlefont':
var font = jQuery('[name="googlefont_font"]').val();
var size = jQuery('[name="googlefont_size"]').val();
var margin = jQuery('[name="googlefont_margin"]').val();
var text = jQuery('[name="googlefont_text"]').val();
var weight = jQuery('[name="googlefont_weight"]').val();
var extend = jQuery('[name="googlefont_extend"]').val();
// fontstyle is a checkbox
var fontstyle = jQuery('[name="googlefont_font_style"]');
var color = jQuery('[name="googlefont_color"]').val();
if ( font ) { font = ' font="' + font + '"'; }
if ( size ) { size = ' size="' + size + '"'; }
if ( margin ) { margin = ' margin="' + margin + '"'; }
if( weight ) { weight = ' weight="' + weight + '"'; }
if( extend ) { extend = ' extend="' + extend + '"'; }
if ( text ) { text = '' + text + ''; }
if ( color ) { color = ' color="' + color + '"'; }
if (fontstyle.is(':checked')) {
fontstyle = ' fontstyle="true"';
} else {
fontstyle = ' fontstyle="false"';
}
return '[googlefont' + font + size + margin + weight + color + extend + fontstyle + ']' + text + '[/googlefont]';
break;
case 'drop cap':
// type is a select element with the values
var type = jQuery('[name="dropcap_type"]').val();
var text = jQuery('[name="dropcap_text"]').val();
var text_color = jQuery('[name="dropcap_textcolor"]').val();
var bgcolor = jQuery('[name="dropcap_bgcolor"]').val();
var droptype = jQuery('#dropcap_type').val();
if ( type ) { type = ' type="' + type + '"'; }
if ( text ) { text = ' letter="' + text + '"'; }
if ( text_color ) { text_color = ' text_color="' + text_color + '"'; }
if ( bgcolor ) { bgcolor = ' bgcolor="' + bgcolor + '"'; }
if(droptype == 'dropcap3'){
return '[dropcap'+ type + text_color + text +']';
}else{
return '[dropcap'+ type + bgcolor + text_color + text +']';
}
break;
上面的代码工作正常,但是如果我在另一种情况下有更多字段,其中有超过 30 个输入字段怎么办。我想让代码像这样压缩。
case 'icons':
var style,size,color;
if ( var ) { var = ' var="' + getvalue + '"'; }
return ''n[icons' + style + size + color + ']'n';
break;
或者有没有更好的处理方法。
更新
更新了代码,现在首字下沉和图标工作正常,但谷歌字体案例显示了一个问题,即它不会从复选框中获取值,因为输入中没有存储默认值。
case 'dropcap':
var dropcapAttributes = ['type', 'text', 'textcolor','bgcolor'],
ret = '', value;
jQuery.each(dropcapAttributes , function (id, attrib) {
value = jQuery('[name="dropcap_' + attrib + '"]').val();
ret += ' ' + attrib + '="' + value + '"';
});
return ''n[dropcap' + ret + ']'n';
break;
// G O O G L E F O N T
//--------------------------------------------------------
case 'googlefont':
var googlefontAttributes = ['font', 'size', 'margin','text','weight','extend','font_style','color'],
ret = '', value;
jQuery.each(googlefontAttributes , function (id, attrib) {
value = jQuery('[name="googlefont_' + attrib + '"]').val();
ret += ' ' + attrib + '="' + value + '"';
});
return ''n[googlefont' + ret + ']' + text + '[/googlefont]'n';
break;
case 'icons':
var iconAttributes = ['style', 'size', 'color'],
ret = '', value;
jQuery.each(iconAttributes , function (id, attrib) {
value = jQuery('[name="icons_' + attrib + '"]').val();
if(value !== '') {
ret += ' ' + attrib + '="' + value + '"';
}
});
return ''n[icons' + ret + ']'n';
break;
在谷歌字体中,简码有一个结束元素和里面的文本,它显示未定义。如何将文本属性或任何属性与之分开?
您可以在数组中列出属性名称并循环访问它们:
case 'icons':
var iconAttributes = ['style', 'size', 'color'],
ret = '', value;
$.each(iconAttributes , function (id, attrib) {
value = jQuery('[name="icons_' + attrib + '"]').val();
if(value !== '') {
ret += ' ' + attrib + '="' + value + '"';
}
});
return ''n[icons' + ret + ']'n';
break;
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- jQuery最近父级的数据属性选择器
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- jquery IE7中的第n个选择器
- Webdriver.io pageObject模式-通过传递参数来定义元素选择器
- jquery日期选择器年份范围默认值
- jQuery选择器就是用这个构建的
- 如何使用jquery选择器构建具有同级标记的分层对象
- 从输入属性自动构建选择器
- 是否可以使用 GWT 构建像独立小部件(如滑块或日期选择器等)一样的 jquery
- 如何为多筛选器构建jquery选择器
- HTML手动构建的日期选择器
- 如何从jquery构建嵌套列表:header选择器
- 如何使用变量构建有效的JQuery选择器
- jQuery选择器和对象构建