我正在复制 Javascript

Question

我们将有一组记录，其中用户将 select 他们希望该部分的颜色。如您所见，我正在复制脚本代码，以便我可以更改 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" 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>

Answer 1

您可以使用类，例如 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>

那么你的 javascript 看起来像

$('.theme').change(function() {
    var $this = $(this);
    var background= $this.val();

    $this.closest('.full').css("background-color", background);
})

编辑：修复了错误，从父级更改为最接近的，这样 .full 不必是输入的直接父级。

Answer 2

您可以通过简单的 for loop 来实现。
如果颜色数不是静态的，您可以使用 jquery "starts with" selector 获取所有元素，然后取长度。

$(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);
            });
        }
    });
});

下面是一个工作片段。您的 HTML 有一些问题，我不确定您是否有意设置 .change() event，但为了演示我直接更改了它。

$(window).load(function(){
    $(document).ready(function(){
        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";
            }
            
            var background = $(color).val();   
            $(full).css("background-color", background);
        }
    });
});

.color-box {
  background-color: #ffffff;
  border: solid 2px black;
  min-height: 30px;
  margin: 5px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<label for="color">Color :</label>
<form method="post" action="">
    <div id="full" class="color-box"> 
        <input id="color1" type="hidden" name="color1" value="lightblue" class="theme"/>
    </div>
    <div id="full2" class="color-box"> 
        <input id="color2" type="hidden" name="color2" value="#226666" class="theme2"/>
    </div>
    <div id="full3" class="color-box"> 
        <input id="color3" type="hidden" name="color3" value="rgba(140,15,110,.6)" class="theme3"/>
    </div>
</form>

我正在复制 Javascript

I'm Duplicating Javascript

html

javascript

css

jquery

dry