<分区>
php - 使用 jquery 隐藏 CSS 类
我在这里发现了一篇帖子，内容与我的要求基本相同，但上面写着“避免寻求帮助或澄清”，所以我开始发一篇新帖子。
在线订单提交后，我在感谢页面上生成了一个服务器端 CSS - 看起来像这样:
我想隐藏文本 Logo - 左上角 - “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" alt="" /> 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();，就像 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>关于php - 使用 jquery 隐藏 CSS 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44335915/