用jquery隐藏CSS类[重复]
Posted
技术标签:
【中文标题】用jquery隐藏CSS类[重复]【英文标题】：Hide CSS class with jquery [duplicate] 【发布时间】：2017-11-04 06:39:34 【问题描述】：我在这里找到了一个帖子，内容与我所问的内容基本相同，但它说“避免寻求帮助或澄清”，所以我开始了一个新帖子。
在线订单提交后，我在感谢页面上生成了一个服务器端 CSS - 它看起来像这样：
我想隐藏文本徽标 - 左上角 - “textLogo1”，然后我想在中间隐藏“继续购物”链接。
我可以通过将它添加到类中来在 firebug 中执行此操作，但我无法在任何地方找到该类。
这是一个使用 Big Commerce 的网站，我想知道：
-
这样的jQuery请求怎么写？
写好请求后，我会将请求放在哪里？ （我假设是 header.php）
我可以使用这样的东西吗？
document.getElementById('item').className = '';
我目前掌握的一些代码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Thanks for Your Order</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name='robots' content='noindex, nofollow' />
<link href="//fonts.googleapis.com/css?family=Lato:400,300" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="https://cdn3.bigcommerce.com/s-4xqa0tnsba/product_images/android-icon-48x48.png?t=1496184441" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
//<![CDATA[
(function()
// this happens before external dependencies (and dom ready) to reduce page flicker
var node, i;
for (i = window.document.childNodes.length; i--;)
node = window.document.childNodes[i];
if (node.nodeName == 'HTML')
node.className += ' javascript';
)();
//]]>
</script>
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/__master/Styles/styles.css" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/iselector.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/flexslider.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/slide-show.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/styles-slide-show.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/social.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/styles.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/light.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/theme.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/grid.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/responsive.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/Styles/font-awesome.css" media="all" type="text/css" rel="stylesheet" />
<link href="https://cdn4.bigcommerce.com/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a/javascript/superfish/css/store.css" type="text/css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="https://cdn4.bigcommerce.com/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a/javascript/jquery/plugins/imodal/imodal.css?87ceb" />
<link href="https://cdn3.bigcommerce.com/s-4xqa0tnsba/stencil/39a119c0-217f-0135-4282-525400dfdca6/css/checkout-7a034520-27e5-0135-ba7c-525400970412.css" type="text/css" rel="stylesheet">
<!-- Tell the browsers about our RSS feeds -->
<!-- Include visitor tracking code (if any) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdn3.bigcommerce.com/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a/javascript/menudrop.js?"></script>
<script src="https://cdn3.bigcommerce.com/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a/javascript/viewport.js?"></script>
<!-- Theme bespoke js -->
<script src="https://cdn3.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/js/common.js"></script>
<script src="https://cdn3.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/js/jquery.autobox.js"></script>
<script src="https://cdn3.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/js/init.js"></script>
<script src="https://cdn3.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/js/jquery.uniform.min.js"></script>
<script src="https://cdn3.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/js/main.js?"></script>
<script>
//<![CDATA[
config.ShopPath = 'https://store-4xqa0tnsba.mybigcommerce.com';
config.Email = '';
config.AppPath = ''; // BIG-8939: Deprecated, do not use.
config.FastCart = 1;
config.ShowCookieWarning = !!0;
var ThumbImageWidth = 190;
var ThumbImageHeight = 285;
//]]>
</script>
<script type="text/javascript">
function beacon_deferred(beacon_api)
beacon_api.order.success('', 2993220,
"order":
"num": "52611501"
,
"customer":
"id": 3
);
beacon_api.set_cookie_domain(".store-4xqa0tnsba.mybigcommerce.com");
beacon_api.pageview('', 2993220, "order_success",
"order":
"num": "52611501"
,
"customer":
"id": 3
, 'dfc98ec4-0f99-4e85-8686-0badb06c9a76', 'f1de836e-72f9-4f25-b331-6b83ca33785f');
(function()
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.type = 'text/javascript';
g.defer = g.async = true;
g.src = 'https://cdn4.bigcommerce.com/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a/javascript/jirafe/beacon_api.js';
s.parentNode.insertBefore(g, s);
)();
</script>
<script type="text/javascript" src="https://cdn4.bigcommerce.com/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a/javascript/jquery/plugins/jquery.form.js?87ceb"></script>
<script type="text/javascript" src="https://cdn4.bigcommerce.com/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a/javascript/jquery/plugins/imodal/imodal.js?87ceb"></script>
<script type="text/javascript">
(function()
window.bcanalytics || (window.bcanalytics = []), window.bcanalytics.methods = ["debug", "identify", "track",
"trackLink", "trackForm", "trackClick", "trackSubmit", "page", "pageview", "ab", "alias", "ready", "group",
"on", "once", "off", "initialize"
], window.bcanalytics.factory = function(a)
return function()
var b = Array.prototype.slice.call(arguments);
return b.unshift(a), window.bcanalytics.push(b),
window.bcanalytics
;
for (var i = 0; i < window.bcanalytics.methods.length; i++)
var method = window.bcanalytics.methods[i];
window.bcanalytics[method] = window.bcanalytics.factory(method)
window.bcanalytics.load = function()
var a = document.createElement("script");
a.type = "text/javascript",
a.async = !0, a.src = "https://cdn4.bigcommerce.com/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a/app/assets/js/vendor/bigcommerce/analytics.min.js";
var b = document.getElementsByTagName("script")[0];
b.parentNode.insertBefore(a, b)
, window.bcanalytics.SNIPPET_VERSION = "2.0.8", window.bcanalytics.load();
bcanalytics.initialize(
"Fornax":
"host": "https:\/\/analytics.bigcommerce.com",
"cdn": "https:\/\/cdn4.bigcommerce.com\/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a\/app\/assets\/js\/vendor\/bigcommerce\/fornax.min.js",
"defaultEventProperties":
"storeId": 999441665,
"experiments":
"PROJECT-174.channel_twitter": "control",
"PROJECT-331.pos_manager": "on",
"PROJECT-632.square_export": "on",
"PROJECT-756.channel_pinterest": "on",
"PROJECT-756.pinterest_material_options": "control",
"PROJECT-783.channel_facebook": "on",
"PROJECT-783.channel_facebook.disconnect": "on",
"PROJECT-1245.amazon-payments.registration.eu": "on",
"PROJECT-1245.amazon-payments.registration.us": "on",
"PROJECT-1493.custom_order_status_labels": "control",
"OMNI-1010.channel_amazon.coming_soon": "on",
"OMNI-913.channel_amazon": "on",
"OMNI-2917.channel_buy_buttons": "on",
"OMNI-2918.google_shopping": "control",
"OMNI-1010.channel_ebay.coming_soon": "control",
"OMNI-764.channel_ebay": "on",
"OMNI-3167.channel_instagram.coming_soon": "on",
"OMNI-900.channel_amazon.amazon_variants": "control",
"OMNI-799.facebook_checkout": "on",
"OMNI-2943.channel_facebook.refactor": "control",
"OMNI-2999.products.cdn": "on",
"OMNI-3354.omnichannel.cdn": "on",
"BIG-29859.facebook_messenger_integration": "control",
"CP-78.cp_click_tracking": "control",
"PROJECT-1082.promote_ppec": "on",
"BIG-28672.shipstation": "on",
"PROJECT-871.dashboard_redesign": "on",
"PROJECT-974.order_notification": "on",
"ng-products": "control",
"ng-add-edit-products": "control",
"API-417.enable_api_oauth_account_creation": "on",
"CRO-5.new_product_listing": "off",
"CRO-16.left_align_buttons": "on",
"CRO-8.getting-started-content-test": "on",
"CRO-63.separate-design-options": "off",
"PROJECT-1441.dashboard.store_performance_channels": "on",
"PROJECT-1413.PinterestProductListings": "control",
"CRO-83.create_test_order_onboarding_card": "control",
"CP-860.switch_stores": "on",
"PROJECT-1413.PinterestChannelServiceAuth": "control",
"CRO-46.upload-logo-design": "control",
"CP-1284.search-ui": "control",
"PROJECT-1522.google_customer_reviews": "control",
"PROJECT-976.braintree.visa.checkout": "control",
"CP-1252.self_help.phase2": "control",
"DATA-2896.ng-analytics.enable": "control"
,
"defaultContext":
"source": "Bigcommerce Storefront"
,
"anonymousId": "f1de836e-72f9-4f25-b331-6b83ca33785f"
);
)();
var BCData = ;
</script>
<script type="text/javascript" src="https://cdn4.bigcommerce.com/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a/javascript/quicksearch.js"></script>
<!--[if lt IE 9]>
<script src="https://cdn3.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/js/html5shiv.js"></script>
<![endif]-->
</head>
<script type="text/javascript" src="https://cdn3.bigcommerce.com/r-c6bdea2696c2b390db90de13e6bd8dc31e0f984a/javascript/jquery/plugins/jCarousel/jCarousel.js?"></script>
<body>
<div id="DrawerMenu">
<div class="inner">
<div class="CategoryList" id="SideCategoryList">
<h3>Categories</h3>
<div class="BlockContent">
<div class="SideCategoryListFlyout">
<ul class="sf-menu sf-horizontal">
<li><a href="http://shop.modassystems.com/tomball-top/">Tomball</a>
<ul>
<li><a href="http://shop.modassystems.com/program/tomball/devices/">Devices</a>
<ul>
<li><a href="http://shop.modassystems.com/program/tomball/devices/android/">Android</a></li>
<li><a href="http://shop.modassystems.com/program/tomball/devices/iphones/">iPhones</a></li>
<li><a href="http://shop.modassystems.com/program/tomball/devices/basic-phones/">Basic Phones</a></li>
<li><a href="http://shop.modassystems.com/program/tomball/devices/tablets/">Tablets</a></li>
<li><a href="http://shop.modassystems.com/program/tomball/devices/mifi/">MiFi</a></li>
</ul>
</li>
<li><a href="http://shop.modassystems.com/tomball/equipment-protection/">Equipment Protection</a></li>
</ul>
</li>
<li><a href="http://shop.modassystems.com/education/">Education</a>
<ul>
<li><a href="http://shop.modassystems.com/education/tomballisdtx/">Tomball ISD</a>
<ul>
<li><a href="http://shop.modassystems.com/education/tomball-isd/devices/">Devices</a>
<ul>
<li><a href="http://shop.modassystems.com/mgdpmtplt/tomball-isd/devices/iphones/">iPhones</a></li>
<li><a href="http://shop.modassystems.com/hidden/education/tomball-isd/devices/basic-phones/">Basic Phones</a></li>
<li><a href="http://shop.modassystems.com/mgdpmtplt/tomball-isd/devices/android/">Android</a></li>
<li><a href="http://shop.modassystems.com/hidden/education/tomball-isd/devices/mifi/">MiFi</a></li>
</ul>
</li>
<li><a href="http://shop.modassystems.com/education/tomball-isd/equipment-protection/">Equipment Protection</a></li>
<li><a href="http://shop.modassystems.com/tisdtxbyod/">BYOD</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://shop.modassystems.com/kippdc/">KIPP DC</a>
<ul>
<li><a href="http://shop.modassystems.com/modas-mobile-technology-programs/kipp-dc/phones/">Phones</a>
<ul>
<li><a href="http://shop.modassystems.com/kipp-dc/phones/ios/">iOS</a></li>
<li><a href="http://shop.modassystems.com/kipp-dc/phones/android/">Android</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="Block Moveable Panel" id="SideShopByBrand" style="display:none;"></div>
<div class="Block Moveable Panel" id="SideCategoryShopByPrice" style="display:none;"></div>
<div class="AdditionalInformationList Moveable Panel slist" id="SideAdditionalInformation">
<h3>Additional Information</h3>
<div class="BlockContent">
<ul class="treeview">
<li><a href="/">Home</a></li>
</ul>
<ul class="pages-menu sf-menu sf-horizontal sf-js-enabled">
<li class=" ">
<a href="http://shop.modassystems.com/about-us/"><span>About Us</span></a>
</li>
<li class=" ">
<a href="http://shop.modassystems.com/contact-us/"><span>Contact Us</span></a>
</li>
</ul>
</div>
</div>
<div class="AccountNavigationList Moveable Panel slist" id="SideAccountNavigation">
<h3>Site Information</h3>
<div class="BlockContent js-side-account-menu">
<!-- Fill with content from TopMenu -->
</div>
</div>
<script>
(function($, window)
'use strict';
var bcTheme = window.bcTheme || ;
bcTheme.mobile = bcTheme.mobile || ;
var MobileAccountMenu = function MobileAccountMenu() ;
MobileAccountMenu.prototype.init = function init(selector)
this.$element = $(selector);
this.cloneTopMenu();
this.setCurrencyConvertor();
this.bindEvents();
;
MobileAccountMenu.prototype.cloneTopMenu = function cloneTopMenu()
// Cloning from top menu as Globals don't work down here.
var $topMenuClone = $('.TopMenu ul').clone(),
$phoneNumber = $('<a />',
'text': $('.js-drawermenu-store-phone-container').find('.phoneIcon').text(),
'href': 'tel:' + $('.js-drawermenu-store-phone-container').find('.js-drawermenu-store-phone').text()
);
//Modify the cloned menu to make phone clickable and hide stuff we don't need
$topMenuClone.find('.phoneIcon').replaceWith($phoneNumber);
$topMenuClone.find('.js-drawermenu-cart').remove();
//append new menu to drawer
this.$element.append($topMenuClone);
;
MobileAccountMenu.prototype.setCurrencyConvertor = function setCurrencyConvertor()
this.$mobileCurrencyConverter = this.$element.find('.js-drawermenu-currency-converter');
this.$mobileSelectedCurrency = this.$mobileCurrencyConverter.find('.selected-currency');
this.$mobileCurrencyList = this.$mobileCurrencyConverter.find('.CurrencyList');
;
MobileAccountMenu.prototype.bindEvents = function bindEvents()
var that = this;
this.$mobileSelectedCurrency.on('click', function(e)
e.preventDefault();
that.$mobileSelectedCurrency.toggleClass('open');
that.$mobileCurrencyList.toggleClass('open');
);
;
bcTheme.mobile.accountMenu = new MobileAccountMenu();
window.bcTheme = window.bcTheme || bcTheme;
(jQuery, window));
$(function()
bcTheme.mobile.accountMenu.init('.js-side-account-menu');
);
</script>
</div>
</div>
<script>
//<![CDATA[
$(function()
//Drawer Subnavigation Accordion
$('#DrawerMenu li ul').addClass('drawer-subcat');
$('#DrawerMenu .drawer-subcat').prev('a').after('<span class="subcat-expand"></span>');
$('#DrawerMenu .subcat-expand').click(function()
$(this).next('.drawer-subcat').toggleClass('expanded');
$(this).toggleClass('subcat-expanded');
);
);
//]]>
</script>
<div class="page">
<div class="header">
<div class="inner">
<div id="AjaxLoading">
<div class="ajax-loader">
<img src="https://cdn3.bigcommerce.com/r-b894c2cb799bac74ce4990fade5989902a6e1a9d/themes/Stencil/images/loader.png" /> Loading... Please wait...
</div>
</div>
<div id="Header">
<div class="inner">
<div class="header-logo">
<div id="LogoContainer">
<h1><a href="http://shop.modassystems.com/"><span class="Logo1stWord">Modas</span> Systems</a></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="main">
<div class="inner">
<div class="checkout-banner">
<a href="https://store-4xqa0tnsba.mybigcommerce.com">Continue shopping on Modas Systems</a>
</div>
<div class="Content ExpressCheckoutBlock" id="LayoutColumn2">
<div class="Block">
<h1 class="TitleHeading">Thanks for Your Order, john!</h1>【问题讨论】：
$('.classname').hide(); ? 你能提供一些你的代码吗？另外，请告诉我们您尝试了什么，但未能成功使用。 css：.hidden display:none !important; js：$('.classname').addClass('hidden');
【参考方案1】：
只需使用简单的$('.classname').hide();，就像 Matthew Broderick 建议的那样。
在我的示例中，我已将函数设置为在按下按钮时调用，但您可以更改它。
function removeLines()
$('#line1, #line2').hide();
.container
height: 200px;
background-color: blue;
#line1
background-color: red;
#line2
background-color: yellow;
#line3
background-color: green;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="line1">Line 1</div>
<div id="line2">Line 2</div>
<div id="line3">Line 3</div>
<button onclick="removeLines()">Click me to remove lines 1 and 2</button>
</div>【讨论】：
人——你能写出这样的东西真是太棒了。也这么快！总有一天我会去的！！！现在 - 如果我能逃脱 $('.classname').hide(); - 我很高兴 - 我只是 a) 不知道把它放在哪里，这是正确的语法吗？ 【参考方案2】：要在 jquery 中隐藏一个类，请使用此代码
$(".classname").hide();
我猜你是 jquery 的新手。顺便说一句，这应该写成
$("#idofbutton").click(function()
$(".classname").hide();
)
这里的“idofbutton”是单击在线订单提交时放置的按钮。希望对您有所帮助！！！
【讨论】：
是的 - 完全是新手 - 我在 HTML 和 CSS 以及 jQuery 方面相当危险 - 但我从来没有从头开始写过任何东西。我不能按说提供“代码”-bc 我不确定代码来自哪里-这是在页面被实时推送时呈现的内容。【参考方案3】：首先，您可以将此代码放在 html 代码之间的任何位置。 第 1 步 - 包含或嵌入解释 jquery 语法的文件。所以你可以像这样将它写在“head”标签中
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
这是 Jquery 的在线版本，因此请确保您已连接到互联网。 第 2 步-制作一个脚本标签来编写这样的 jquery 代码
<script>
function rmv()
$(".classnameofelementtohide").hide();
</script>
现在最后一步是在点击按钮时调用该函数，所以按钮代码应该是这样的：
<button onclick="rmv()">Click to submit your order online</button>
【讨论】：
哇——太棒了！我挖掘它 - 只是它不是一个按钮 - 我正在努力做到这一点，所以当所说的脚本看到的类 - 复选框横幅 - 我希望它被隐藏。 :-( 对不起，我对这些东西很蹩脚。 很抱歉，您刚才在评论中所说的我一个字都听不懂。请详细说明！以上是关于用jquery隐藏CSS类[重复]的主要内容，如果未能解决你的问题，请参考以下文章
在 jQuery 上使用 !important 更改 fullcalendar 的 css 类属性 [重复]