关于页面模块，比如以下这种颜色选择模块怎么在同一页面重用？
html：
<!--答案一-->
<div class="test-edit">
<header>
<h2>答案一</h2>
</header>
<section class="wrap-textarea clear">
<div class="font">
文字:
</div>
<textarea class="textarea">
</textarea>
</section>
<div class="wrap-color clear">
<div class="show">
<div>
<div class="coloroption bgcolor active">背景色</div>
<div id="bgcolorbar" class="bgcolorbar"></div>
</div>
<div>
<div class="coloroption fontcolor">文字色</div>
<div id="fontcolorbar" class="fontcolorbar"></div>
</div>
</div>
<div class="rgba">
<div class="opacity clear">
<div class="left">
透明度:
</div>
<div class="right">
<span id="transparency">75%</span><input id="opacity" type="range" min="0" max="100">
</div>
</div>
<div class="color clear">
<div class="left">
颜色:
</div>
<div class="right">
<div>红：<input class="red" type="range" min="0" max="255"></div>
<div>绿：<input class="green" type="range" min="0" max="255"></div>
<div>蓝：<input class="blue" type="range" min="0" max="255"></div>
</div>
</div>
</div>
<div class="square">
<ul>
<input id="color" type="text" placeholder="如：#000000">
</ul>
</div>
</div>
</div>
<!--END答案一-->
<!--答案二-->
<div class="test-edit">
<header>
<h2>答案二</h2>
</header>
<section class="wrap-textarea clear">
<div class="font">
文字:
</div>
<textarea class="textarea">
</textarea>
</section>
<div class="wrap-color clear">
<div class="show">
<div>
<div class="coloroption bgcolor active">背景色</div>
<div id="bgcolorbar" class="bgcolorbar"></div>
</div>
<div>
<div class="coloroption fontcolor">文字色</div>
<div id="fontcolorbar" class="fontcolorbar"></div>
</div>
</div>
<div class="rgba">
<div class="opacity clear">
<div class="left">
透明度:
</div>
<div class="right">
<span id="transparency">75%</span><input id="opacity" type="range" min="0" max="100">
</div>
</div>
<div class="color clear">
<div class="left">
颜色:
</div>
<div class="right">
<div>红：<input class="red" type="range" min="0" max="255"></div>
<div>绿：<input class="green" type="range" min="0" max="255"></div>
<div>蓝：<input class="blue" type="range" min="0" max="255"></div>
</div>
</div>
</div>
<div class="square">
<ul>
<input id="color" type="text" placeholder="如：#000000">
</ul>
</div>
</div>
</div>
<!--END答案二-->
javascript：
var color = {
init: function() {
this.initColor();
this.render();
},
render: function(){
var $square = $(".square");
var $squareLi = $square.find("li");
var $coloroption = $(".coloroption");
$squareLi.click(function(){
//获取颜色
var color = $(this).css("backgroundColor");
var rgb=color.replace(/[rgb()\s]/g,'').split(",");
//设置滑块位置
$(".red")[0].value=rgb[0];
$(".green")[0].value=rgb[1];
$(".blue")[0].value=rgb[2];
//设置所选颜色
$(this).addClass("active").siblings().removeClass("active");
$(".bgcolor").hasClass("active")?$("#bgcolorbar").css("background-color",color):$("#fontcolorbar").css("background-color",color);
})
//背景色、文字色选项
$coloroption.click(function(){
$coloroption.removeClass("active");
$(this).addClass("active");
})
$(".rgba").find("input[type=range]").change(function(){
//获取变化后颜色
var red=$(".red")[0].value;
var green=$(".green")[0].value;
var blue=$(".blue")[0].value;
var transparency=$("#opacity")[0].value;
var opacity=Math.round((100-transparency)/10)/10;
var rgba="rgba("+red+","+green+","+blue+","+opacity+")";
//设置颜色和值
console.log(opacity);
$("#transparency").html(transparency+"%")
$(".bgcolor").hasClass("active")?$("#bgcolorbar").css("background-color",rgba):$("#fontcolorbar").css("background-color",rgba);
})
},
initColor: function() {
var color = ["fff", "000", "595959", "f14646", "e95731", "f6bb43", "8cc051", "3baeda", "36bc9b", "3baeda", "967bdc", "f22874", "abda3b", "7bdcab", "6a37ee", "3bda5d", "36bc9b", "40535a", "503b87", "7cd0f0", "da3bb3"];
$.each(color.reverse(), function(index, value) {
var $li = $("<li></li>");
$li.css({
"background-color": "#" + value,
}).prependTo(".square ul")
});
//初始化透明度
$("#opacity")[0].value = 0;
$("#opacity").prev().html("0%")
//初始化颜色值
$(".red")[0].value=255;
$(".green")[0].value=255;
$(".blue")[0].value=255;
//初始化所选颜色
$(".square").find("li").eq(0).addClass("active")
},
}
color.init()
用面向对象和编程的思路写成类。
如果 HTML 已经存在了，可以用 jQuery 的 Clone，示例如下
https://jsfiddle.net/v0xhhves/
不过，注意 ID 需要唯一，所以要么在产生 HTML 的时候就不要ID，要么在 clone DOMS 之后修改ID
谢谢邀请。其实就是把这个模块单独提取出来封装成公共的引用。你可以把对应的色块写成一个小文件引用，或者写成一个js的方法引用。都可以的。仅提供思路希望能帮到你