Javascript 更改表格的边框和背景色并将鼠标悬停在其上

我试图通过单击按钮来更改表格的背景和边框。我还试图通过将鼠标悬停在按钮上来改变颜色。如果我先做的话，我会让悬停开始工作。我遇到的问题是，当我单击一个按钮以更改背景颜色时，我无法单击任何其他按钮以更改为该特定按钮的颜色。例如，我有四个按钮，蓝色，绿色，黄色，红色。如果我单击蓝色按钮，背景将变为蓝色，然后如果我选择单击其他彩色按钮，它将不起作用，并且在单击任何按钮一次后，我的悬停也将不再起作用。此外，如何减少耦合。如果我添加更多的颜色按钮，我将以这样的速度运行，这只会增加更多的代码行

 <h1 class="underline">Choose a Background or Border Color</h1>
            <div class="divCenter">
                <div class="divTable" ></div>
            </div></br>
        <button id="button1">Blue</button>
        <button id ="button2">Green</button>
        <button id="button3">Yellow</button>
        <button id ="button4">Red</button></br>
        <button id="button5">Blue Border</button>
        <button id ="button6">Green Border</button>
        <button id="button7">Yellow Border</button>
        <button id ="button8">Red Border</button></br>
        <script>
        $(document).ready(function()
            {
                $("#button1").click(function()
                    {

                        $(".divTable").attr("class","divTableBlue");
                    }); 

                $("#button2").click(function()
                    {
                    $(".divTable").attr("class","divTableGreen");

                    });
                $("#button3").click(function()
                    {
                    $(".divTable").attr("class","divTableBlue");
                    });
                $("#button4").click(function()
                    {
                        $(".divTable").attr("class","divTableRed");
                });
        $("#button1").hover(function()
                    {
                        $(".divTable").addClass("divTableBlue");
                    }, 
                    function() 
                    {
                        $(".divTable").removeClass("divTableBlue"); 
                    });
                $("#button2").hover(function()
                    {
                        $(".divTable").addClass("divTableGreen");
                    }, 
                    function() 
                    {
                        $(".divTable").removeClass("divTableGreen");
                    });
                $("#button3").hover(function()
                    {
                        $(".divTable").addClass("divTableYellow");
                    }, 
                    function() 
                    {
                        $(".divTable").removeClass("divTableYellow");
                    });
                $("#button4").hover(function()
                    {
                        $(".divTable").addClass("divTableRed");
                    }, 
                    function() 
                    {
                        $(".divTable").removeClass("divTableRed");
                    });
            });
        </script>

---

看看这是否是您所期望的：

您可以将代码简化为：

var colors = [                       //first make a list of colors.
    "Blue",
    "Green",
    "Red",
    "Yellow"
    ],
    selected = "";                   //later used to store selected color

然后做一个函数：

function seperate(arr,j){            //created a separate function
    return function(){               // to store i given by the loop.
        $(".divTable")
            .attr("class","divTable")
            .addClass("divTable" + arr[j]);
        selected = arr[j];
    }
}

function seperate_hover(arr,j){
    return function(){
        $("#button"+(j+1)).hover(function(){
                $(".divTable")
                .attr("class","divTable")
                .addClass("divTable"+arr[j]);
        },function(){
            $(".divTable")
                .attr("class","divTable")
                .addClass("divTable"+selected);  //change back to the selected color.
        });
    }
}

function doTheJob(arr) {
    for (var i = 0; i < arr.length; i++) {
        $("#button" + (i + 1)).on("click", seperate(arr,i));   //click
        seperate_hover(arr,i)();                               //hover
    }
}

doTheJob(colors);​                   //the script will now do the job for you

function separate（arr，j）{//创建了一个单独的函数
返回函数（）{//以存储循环给定的i。
$（“.divTable”）
.attr（“类”、“可分割”）
.addClass（“divTable”+arr[j]）；
所选=arr[j]；
}
}
功能分离悬停（arr，j）{
返回函数（）{
$（“#按钮”+（j+1））.hover（函数（）{
$（“.divTable”）
.attr（“类”、“可分割”）
.addClass（“divTable”+arr[j]）；
}，函数（）{
$（“.divTable”）
.attr（“类”、“可分割”）
.addClass（“divTable”+选定）；//更改回选定的颜色。
});
}
}
作业功能（arr）{
对于（变量i=0；i

另外，请使用

.on（“单击”）

而不是

。单击（）

使用

$('target').on('click', function(){
     //add your code
});

---

我没有使用

.click（）

而是使用上面的第一块代码来减少它，但它仍然不能帮助我找到问题的答案。。而且，当我使用时。。我只需将鼠标悬停在第一个颜色索引上。@user1392576-看看这是否是您想要的：（已编辑）非常感谢大家。它让我了解了如何解决我的问题。这比我现在做的更简单。

$('target').on('click', function(){
     //add your code
});