Question

我发布的代码我在jQuery中尝试过可能是一个基本的代码，但是我是新手，希望你理解并帮助我。我希望唯一选定的区域应该是彩色的，之前点击的其余区域和非选定区域应该是非彩色的......

在这段代码中，我可以为每个标签应用所需的颜色...... 但如何完成所需的任务..

希望得到您的帮助...提前致谢

<script type="text/javascript" src="scripts/jquery-latest.min.js" > </script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".cell1").click(function () {
            $(this).css("background-color", "red");
        });
    });
</script>

<style type="text/css">
    .table
    {
        display: table;
        width:700px;
        border: 1px solid #aaa; 
    }  

     .row
    {

        display: table-row;
        height:100px;
        border: 1px solid #aaa;                   

    }
     .cell
    {
        display: table-cell;
        width:100px;
        font-size:larger;
        text-align:center;
    }

    .cell1
    {
        display :table-cell;
        width:100px;
        font-size:small;
        border: 1px solid #aaa;
    }

    .cell2
    {
        display:table-cell;
        height:90px;
        width:100px;

    }
</style>

<div class="table">
<div class="row">
<div class="cell">
Sun
</div>

 <div class="cell">
Mon
</div>

 <div class="cell">
Tue
</div>

 <div class="cell">
Wed
</div>

 <div class="cell">
Thu
</div>

 <div class="cell">
Fri
</div>

 <div class="cell">
Sat
</div>
</div>


<div class="row">
<div  id="num1" class="cell1"  >
27


</div>

 <div class="cell1" id="num2">
28
</div>

 <div class="cell1" id="num3">
29
</div>

 <div class="cell1" id="num4" >
30
</div>

 <div class="cell1" id="num5">
1
</div>

 <div class="cell1" id="num6">
2
</div>

 <div class="cell1" id="num7">
3
</div>
</div>

<div class="row">
<div class="cell1" id="num8">
4
</div>

 <div class="cell1" id="num9">
5
</div>

 <div class="cell1" id="num10">
6
</div>

 <div class="cell1" id="num11">
7
</div>

 <div class="cell1" id="num12">
8
</div>

 <div class="cell1" id="num13">
9
</div>

 <div class="cell1" id="num14">
10
</div>
</div>

<div class="row">
<div class="cell1" id="num15">
11
</div>

 <div class="cell1" id="num16">
12
</div>

 <div class="cell1" id="num17">
13
</div>

 <div class="cell1" id="num18">
14
</div>

 <div class="cell1" id="num19">
15
</div>

 <div class="cell1" id="num20">
16
</div>

 <div class="cell1" id="num21">
17
</div>
</div>

<div class="row">
<div class="cell1" id="num22">
18
</div>

 <div class="cell1" id="num23">
19
</div>

 <div class="cell1" id="num24">
20
</div>

 <div class="cell1" id="num25">
21
</div>

 <div class="cell1" id="num26">
22
</div>

 <div class="cell1" id="num27">
23
</div>

 <div class="cell1" id="num28">
24
</div>
</div>

<div class="row">
<div class="cell1" id="num29">
25
</div>

 <div class="cell1" id="num30">
26
</div>

 <div class="cell1" id="num31">
27
</div>

 <div class="cell1" id="num32">
28
</div>

 <div class="cell1" id="num33">
29
</div>

 <div class="cell1" id="num34">
30
</div>

 <div class="cell1" id="num35">
31
</div>
</div>
</div>
</form>

Answer 1

您可以使用类基础解决方案，如

$(document).ready(function () {
    $(".cell1").click(function () {
        $('.cell1.highlight').removeClass('highlight')
        $(this).addClass("highlight");
    });
});

然后

.cell1.highlight{
    background-color: red;
}

演示：Fiddle

Answer 2

清除之前点击设置的背景颜色

$(".cell1").click(function () {
    $(".cell1").not(this).css("background-color", ""); //Added this statement
    $(this).css("background-color", "red");
});

DEMO

Answer 3

尝试此解决方案。

$(".cell1").click(function () {
        $(".cell1").removeAttr('style')
            $(this).css("background-color", "red");
        });

Fiddle Demo

Answer 4

此代码使用的选择和搜索次数少于较短版本（性能明智）

$(document).ready(function () {
        var prev=undefined;
        $(".cell1").click(function () {
            if(prev!==undefined) prev.css("background-color", "white");
            prev=$(this);
            $(this).css("background-color", "red");
        });
    });

Answer 5

    Here i got the answer to color the bacgroung of ONLY SELECTED BLOCK AND STORING SOME FIELDS IN TO DATA BASE USING JQUERY(AJAX)

    HOPE MY ANSWER WILL BE USEFUL TO THE STARTERS..
     <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calender.aspx.cs" Inherits="_Default" %>

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title></title>
            <script type="text/javascript" src="scripts/jquery-latest.min.js" > </script>
            <script type="text/javascript" src="scripts/json2.js"></script>


            <script type="text/javascript">     

               $(document).ready(function () {
                    $(".cell1").click(function () {
                        $(".cell1").not(this).css("background-color", ""); //Added this statement
                        $(this).css("background-color", "red");
                    });
        });





    function myfunc(ID) {


                      switch(ID) {
                      case "num1":  day = "MON";
                                    date = "27";
                                    break;

                      case  "num2": day="TUE";
                                    date="28";
                                    break;

                      case "num3": day = "WED";
                                   date = "29";
                                   break;
                      case "num4": day = "THU";
                                   date = "30";
                                   break;

                      case "num5": day = "FRI";
                                   date = "1";
                                   break;

                      case "num6": day = "SAT";
                                   date = "2";
                                   break;





                          }

    var data = JSON.stringify({ day: day, date: date });

                          $.ajax({
                              type: "POST",
                              url: "Calender.aspx/INSERT_RECORD",
                              data: data,
                              contentType: "application/json; charset=utf-8",
                              datatype: "json",
                              success: function () { alert("success"); },
                              error: function () { alert("error"); }
                          });

    }


            </script>



            <style type="text/css">
                .table
                {
                    display: table;
                    width:700px;
                    border: 1px solid #aaa; 
                }  

                 .row
                {

                    display: table-row;
                    height:100px;
                    border: 1px solid #aaa;                   

                }
                 .cell
                {
                    display: table-cell;
                    width:100px;
                    font-size:larger;
                    text-align:center;
                }

                .cell1
                {
                    display :table-cell;
                    width:100px;
                    font-size:small;
                    border: 1px solid #aaa;
                }

                .cell2
                {
                    display:table-cell;
                    height:90px;
                    width:100px;



                }






            </style>

        </head>
        <body>
            <form id="form1" runat="server">   



            <div class="table">
            <div class="row">
            <div class="cell">
            Sun
            </div>

             <div class="cell">
            Mon
            </div>

             <div class="cell">
            Tue
            </div>

             <div class="cell">
            Wed
            </div>

             <div class="cell">
            Thu
            </div>

             <div class="cell">
            Fri
            </div>

             <div class="cell">
            Sat
            </div>
            </div>

    /*** the function calls at div tags are not written for all tags ******************/

            <div class="row">
            <div  id="num1" class="cell1"   onclick="myfunc(id)">
        27


        </div>

         <div class="cell1" id="num2" onclick="myfunc(id)">
        28
        </div>

         <div class="cell1" id="num3" onclick="myfunc(id)">
        29
        </div>

         <div class="cell1" id="num4" onclick="myfunc(id)" >
        30
        </div>

         <div class="cell1" id="num5" onclick="myfunc(id)">
        1
        </div>         

         <div class="cell1" id="num6" onclick="myfunc(id)">
            2
            </div>

             <div class="cell1" id="num7">
            3
            </div>
            </div>

            <div class="row">
            <div class="cell1" id="num8">
            4
            </div>

             <div class="cell1" id="num9">
            5
            </div>

             <div class="cell1" id="num10">
            6
            </div>

             <div class="cell1" id="num11">
            7
            </div>

             <div class="cell1" id="num12">
            8
            </div>

             <div class="cell1" id="num13">
            9
            </div>

             <div class="cell1" id="num14">
            10
            </div>
            </div>

            <div class="row">
            <div class="cell1" id="num15">
            11
            </div>

             <div class="cell1" id="num16">
            12
            </div>

             <div class="cell1" id="num17">
            13
            </div>

             <div class="cell1" id="num18">
            14
            </div>

             <div class="cell1" id="num19">
            15
            </div>

             <div class="cell1" id="num20">
            16
            </div>

             <div class="cell1" id="num21">
            17
            </div>
            </div>

            <div class="row">
            <div class="cell1" id="num22">
            18
            </div>

             <div class="cell1" id="num23">
            19
            </div>

             <div class="cell1" id="num24">
            20
            </div>

             <div class="cell1" id="num25">
            21
            </div>

             <div class="cell1" id="num26">
            22
            </div>

             <div class="cell1" id="num27">
            23
            </div>

             <div class="cell1" id="num28">
            24
            </div>
            </div>

            <div class="row">
            <div class="cell1" id="num29">
            25
            </div>

             <div class="cell1" id="num30">
            26
            </div>

             <div class="cell1" id="num31">
            27
            </div>

             <div class="cell1" id="num32">
            28
            </div>

             <div class="cell1" id="num33">
            29
            </div>

             <div class="cell1" id="num34">
            30
            </div>

             <div class="cell1" id="num35">
            31
            </div>
            </div>
            </div>
            </form>
        </body>
        </html>


/*******Now code behing web method i named it as calender.aspx.cs********************************/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]

    public static string INSERT_RECORD(string day,int date)

    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["TestConString"].ToString());

        try

        {
                string query = ("INSERT INTO [Dtselections]([selDate],[selDay])" +
                "VALUES (@Date,@Day)");


            SqlCommand cmd = new SqlCommand(query, con);
            cmd.Parameters.AddWithValue("@Day", day);
            cmd.Parameters.AddWithValue("@Date",date);


            con.Open();

            cmd.ExecuteNonQuery();

            con.Close();

            return "Success";

        }



        catch (Exception )

        {

            return "failure";

        }

    }

}

如何使用jquery？</div>仅突出显示具有背景颜色的选定<div>

5 个答案: