javascript - テーブルの境界線と背景色を変更してそれらの上にカーソルを合わせる

Question

ボタンをクリックしてテーブルの背景と境界線を変更しようとしています。また、ボタンの上にカーソルを置いて色を変更しようとしています。最初にホバーを実行すると、ホバーが機能します。私が抱えている問題は、ボタンをクリックして背景色を変更すると、他のボタンをクリックしてその特定のボタンの色に変更できないことです。たとえば、青、緑、黄、赤の 4 つのボタンがあります。青いボタンをクリックすると背景が青に変わり、他の色のボタンをクリックすると機能しなくなり、ボタンを1回クリックするとホバーが機能しなくなります。また、どのように結合を減らすことができますか。カラーボタンを追加すると、コード行が増えるだけです。

 <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>

CSSは

.divTable
{
    display:table;
    padding-top:10px;
    padding-bottom:200px;
    padding-left:10px;
    padding-right:10px;
    width:250px;
    background:grey;
    border-style:solid;
    border-width:5px;
}
.divTableBlue
{
    display:table;
    padding-top:10px;
    padding-bottom:200px;
    padding-left:10px;
    padding-right:10px;
    width:250px;
    background:blue;
    border-style:solid;
    border-width:5px;
}
.divTableGreen
{
    padding-top:10px;
    padding-bottom:200px;
    padding-left:10px;
    padding-right:10px;
    width:250px;
    background:green;
    border-style:solid;
    border-width:5px;
}
.divTableYellow
{
    padding-top:10px;
    padding-bottom:200px;
    padding-left:10px;
    padding-right:10px;
    width:250px;
    background:yellow;
    border-style:solid;
    border-width:5px;
}
.divTableRed
{
    padding-top:10px;
    padding-bottom:200px;
    padding-left:10px;
    padding-right:10px;
    width:250px;
    background:red;
    border-style:solid;
    border-width:5px;
}

.divTableBlueBorder
{
    display:table;
    padding-top:10px;
    padding-bottom:200px;
    padding-left:10px;
    padding-right:10px;
    width:250px;
    border-style:solid;
    border-width:5px;
    border-color:blue;
}
.divTableGreenBorder
{
    padding-top:10px;
    padding-bottom:200px;
    padding-left:10px;
    padding-right:10px;
    width:250px;
    border-style:solid;
    border-width:5px;
    border-color:green;
}
.divTableYellowBorder
{
    padding-top:10px;
    padding-bottom:200px;
    padding-left:10px;
    padding-right:10px;
    width:250px;
    border-width:5px;
    border-style:solid;
    border-color:yellow;
}
.divTableRedBorder
{
    padding-top:10px;
    padding-bottom:200px;
    padding-left:10px;
    padding-right:10px;
    width:250px;
    border-style:solid;
    border-width:5px;
    border-color:red;
}

Answer 1

これが期待どおりかどうかを確認してください: http://jsfiddle.net/DerekL/YjzmY

コードを次のように減らすことができます。

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

また、.on("click")の代わりに使用し.click()ます。

Answer 2

使用する

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

それ以外の.click()