我在复制Javascript
我们将有一组记录，用户将选择什么颜色，他们希望该部分。如您所见，我正在复制脚本代码，以便更改div的颜色。该值将存储在mysql中，并在用户再次访问页面时检索。有没有办法格式化此代码，使其不会重复500次？谢谢你的帮助-新手我在复制Javascript,javascript,jquery,html,css,dry,Javascript,Jquery,Html,Css,Dry,我们将有一组记录，用户将选择什么颜色，他们希望该部分。如您所见，我正在复制脚本代码，以便更改div的颜色。该值将存储在mysql中，并在用户再次访问页面时检索。有没有办法格式化此代码，使其不会重复500次？谢谢你的帮助-新手 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<style type="text/css">
#full {
background-color: #ffffff;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$(".theme").change(function()
{var background = $("#color1").val();
$("#full").css("background-color", background);
});
$(".theme2").change(function()
{var background = $("#color2").val();
$("#full2").css("background-color", background);
});
$(".theme3").change(function()
{var background = $("#color3").val();
$("#full3").css("background-color", background);
});
});
});//]]>
</script>
<link rel="stylesheet" href="css/color_picker.css" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.colorpicker.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
$('#color1').colorPicker({showHexField: false});
$('#color2').colorPicker({showHexField: false});
});
</script>
</head>
<body>
<body >
<label for="color">Color :</label> </td><td>
<div id="full">
<form method="post" action="">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div id="full2" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme2"/>
</div>
<div id="full3" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme3"/>
</div>
</form>
</body>
您可以使用full和theme之类的类，而不是使用Id，因此任何给定集合的html都是
<form method="post" action="">
<div class="full">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme"/>
</div>
</form>
$('.theme').change(function() {
var $this = $(this);
var background= $this.val();
$this.closest('.full').css("background-color", background);
})
编辑：修复错误，从父项更改为最近项，因此.full不必是输入的直接父项。您可以通过简单的操作实现这一点。 如果颜色的数量不是静态的，则可以使用获取所有元素，然后获取长度
$(window).load(function(){
$(document).ready(function(){
//if the count is static you can just hardcode it
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
$(".theme").change(function()
{
var background = $(color).val();
$(full).css("background-color", background);
});
}
});
});
jQuery使用css选择器！但是看起来每个id都有不同的主题，为什么不在有多个id的情况下循环，只做一些类似$'.theme'+i.change。。。；？你的HTML元素不是嵌套的，不应该在里面吗？谢谢你的建议，但我想让它在选择颜色时改变颜色。这只加载颜色。有没有办法我也可以循环$函数{$'color1'。colorPicker{showHexField:false}；$'color2'。colorPicker{showHexField:false}；$'color3'。colorPicker{showHexField:false}；$'color4'。colorPicker{showHexField:false}；$'color5'。colorPicker{showHexField:false}@Bobby你试过$'.theme'.colorPicker{showHexField:false}吗？