Question

如何切换类并从所有其他元素中删除类？考虑一个包含标签的div： HTML：

<div class="size">
   <a href="">blahblah</a>
   <a href="">blahblah</a>
</div>

jQuery的：

 $(".size a").click(function(){
 $(this).toggleClass('checked');
 if($(".size a").hasClass('checked')){
     $(this).removeClass('checked');
  }
 })

我想在元素中添加“cheched”类，并从具有“已检查”类的其他元素中删除“ckeched”类。我的代码删除所有类。如何添加特定类并通过单击删除其他元素的类？提前致谢

Answer 1

这样做

 $(".size a").click(function(){
    $('.size a.checked').not(this).removeClass('checked');
    $(this).toggleClass('checked');
 })

<强>更新

或者你可以做

 $(".size").on('click','a', function(){
    $(this).toggleClass('checked').siblings().removeClass('checked');
 })

Answer 2

只有你需要使用它。：）

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RouteConfig.RegisterRoutes(RouteTable.Routes);         
            HostingEnvironment.RegisterVirtualPathProvider(new ViewPathProvider());
        } 

    My VirtualPathProvider.cs

        public class ViewPathProvider : VirtualPathProvider
        {
            public override bool FileExists(string virtualPath)
            {
                var page = FindPage(virtualPath);
                if (page == null)
                {
                    return base.FileExists(virtualPath);
                }
                else
                {
                    return true;
                }
            }

            public override VirtualFile GetFile(string virtualPath)
            {
                var page = FindPage(virtualPath);
                if (page == null)
                {
                    return base.GetFile(virtualPath);
                }
                else
                {
                    return new MyVirtualFile(virtualPath, page);
                }
            }

            public override CacheDependency GetCacheDependency(string virtualPath,    IEnumerable virtualPathDependencies, DateTime utcStart)
            {
                return null;
            }

            public override string GetFileHash(string virtualPath, IEnumerable virtualPathDependencies)
            {
                return Guid.NewGuid().ToString();
            }

            private string FindPage(string virtualPath)
            {
                string filetype = virtualPath.Substring(virtualPath.Length - 5);
                if(filetype != ".aspx" && filetype != ".ascx" && filetype != "bhtml")
                {
                    Uri host = System.Web.HttpContext.Current.Request.Url;
                    string hostName = host.Host.ToString();
                    Company company = new Company();
                    CMSComponent companiesComponent = new CMSComponent();
                    company = companiesComponent.GetCompanyDetailsByCmsUrl(hostName, virtualPath);
                    Debug.Print(virtualPath);
                    if (company.CompanyId!=0)
                    {                    
                        return company.cmsHtml;
                    }
                    else
                    {
                        return null;
                    }
                }
                else
                {
                    return null;
                }
            }
        }

     Thanks!

Answer 3

这么晚但是我的回答

$(".size").click(function(){ $('.size').removeClass('checked') //Clear all checked class on .size $(this).addClass('checked') //Add checked class to current clicked .size })

它更干净，更强大，更安全。

Answer 4

我假设你有一个“大小”类，其中包含许多元素，其中只有一个元素应该能够在任何时候对该类进行“检查”。

$(".size a").click(function()
{
    if($this).hasClass('checked')
    {
        $(".size a").removeClass('checked');
        $(this).addClass('checked');
    }
    else
    {
        $(this).removeClass('checked');
    }
}

Answer 5

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>On click Change Css</title>
    <link rel="stylesheet" href="css/style.css" >
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $('.main').click(function(){
                $(this).toggleClass('main1').siblings().removeClass('main1');;
             });
        });
    </script>

</head>

<body>

    <center>
        <div class="main" id="main-box">
            <h2>This is main Heading</h2>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
            </p>
        </div>
        <div class="main">
            <h2>This is main Heading</h2>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
            </p>
        </div>
        <div class="main">
            <h2>This is main Heading</h2>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
            </p>
        </div>
    </center>

</body>

Css

.main {
  width:300px;
  margin:30px;
  margin:20px 25px;
  text-align:center;
  background-color:#CCC;
  padding:20px;
  display:inline-block;
}
.main:hover {
  cursor:pointer;
}
.main1 {
  width:300px;
  margin:30px;
  margin:20px 25px;
  text-align:center;
  background-color:#CCC;
  padding:20px;
  border:3px solid #036;
}

Answer 6

$('.size a').on('click', function (e) {     
                    e.preventDefault();

                    $(this).removeClass("checked");
                    $(this).slideToggle();  
                 $(this).toggleClass('checked').removeClass('checked');

                });

toggleClass并从所有其他元素中删除类

6 个答案: