从id标记中的文本进行检查,并将类添加到另一个标记中
check from text within id tag and add class to another tag
我有不同的页面,根据id=节名称中的文本,需要不同的横幅图像。我想使用Javascript或jQuery来检查页面使用的节名,然后在标题容器id中添加一个CSS类。
这是用于SharePoint 2010网站的,将添加到母版页中。
每个aspx
页面都显示以下<div>
标记,并且节名称正在动态写入页面中。
<div id="section-name">*Section name goes here*</div>
例如:<div id="section-name">Toll Stadium</div>
然后我在页面下方有一个<div id="banner-container"></div>
标签。
我需要做的是根据节名向<div id="banner-container"></div>
添加一个类。
例如:
- 如果路段名称等于Toll Stadium,则添加类横幅收费-
<div id="banner-container" class="banner-toll"></div>
;或 - 如果节名等于Whats-On,则添加类横幅whatson-
<div id="banner-container" class="banner-whatson"></div>
;或 - 如果节名等于Christmas Festival,则添加类横幅xmas-
<div id="banner-container" class="banner-xmas"></div>
- 等等
我根本不知道如何编写javascript或jquery。然而,我确实在其他地方找到了一些代码,到目前为止我有以下代码。唯一的问题是每个页面都使用case 0类(banner xmas)。
$(function() {
$('.container')
.find('#banner-container').each(function(i) {
switch(i) {
case 0:
$(this).addClass('banner-xmas');
break;
case 1:
$(this).addClass('banner-whatson');
break;
case 2:
$(this).addClass('banner-toll');
break;
case 3:
$(this).addClass('banner-forum');
break;
case 4:
$(this).addClass('banner-esf');
break;
case 5:
$(this).addClass('banner-xmas');
break;
case 6:
$(this).addClass('banner-plan');
break;
case 7:
$(this).addClass('banner-contact');
break;
}
});
我也尝试了以下方法,但也不起作用:
var objSectionElement = document.getElementById('section-name')
if (objSectionElement != undefined) {
var objSection = objSectionElement.innerHTML.trim();
var objBody = document.body;
if (objSection != undefined && objBody != undefined) {
if (objSection.startsWith('Default')) {
objBody.className = objBody.className + " .banner-general";
}
else if (objSection.startsWith('What')) {
objBody.className = objBody.className + " .banner-whatson";
}
else if (objSection.startsWith('Toll')) {
objBody.className = objBody.className + " .banner-toll";
}
else if (objSection.startsWith('Forum')) {
objBody.className = objBody.className + " .banner-forum";
}
else if (objSection.startsWith('Endless')) {
objBody.className = objBody.className + " .banner-esf";
}
else if (objSection.startsWith('Christmas')) {
objBody.className = objBody.className + " .banner-xmas";
}
else if (objSection.startsWith('Plan')) {
objBody.className = objBody.className + " .banner-plan";
}
else if (objSection.startsWith('Contact')) {
objBody.className = objBody.className + " .banner-contact";
}
}
有什么建议吗?
这似乎应该在服务器上完成,但必须在客户端上完成,请考虑以下内容:
function addClassBasedOnSection() {
var classNames = {
'Default':'banner-general',
'What':'banner-whatson',
'Toll':'banner-toll',
'Forum':'banner-forum',
'Endless':'banner-esf',
'Christmas':'banner-xmas',
'Plan':'banner-plan',
'Contact':'banner-contact'
};
var sectionEl, sectionName, div;
div = document.getElementById('banner-container');
sectionEl = document.getElementById('section-name');
if (sectionEl && div) {
sectionName = sectionEl.textContent || sectionEl.innerText;
div.className += ' ' + (classNames[sectionName] || '');
}
}
$(function(){
//we pass through a reference to the text within the section name.
addClassToBanner($('#section-name').text());
});
/*
* This function needs to be outside of the .ready() scope
*/
function addClassToBanner(txt){
//avoid assignment issues, create empty variable
var bannerClass = '';
switch(txt){
case 'Toll Stadium':
bannerClass = 'banner-toll';
break;
default:
bannerClass = 'banner-default';
break;
}
$('#banner-container').addClass(bannerClass);
}
我会做这样的事情。
<div id="section-name">Toll</div>
$(function(){
var sectionName = document.getElementById("section-name").innerHTML;
switch(sectionName) {
case "xmas":
$('#banner-container').addClass('banner-xmas');
break;
case "whatson":
$('#banner-container').addClass('banner-whatson');
break;
case "toll":
$('#banner-container').addClass('banner-toll');
break;
}
});
相关文章:
- 如何使用jQuery添加另一个对象的高度作为边距
- 必应地图没有'当我向函数添加另一个参数时,t显示
- 对添加另一个选项卡的onsubmit函数停止重定向
- 单击链接时添加另一个选项
- 列表视图添加另一个不需要的页面项目
- 添加另一个变量后,正则表达式替换不起作用
- 如何通过单击按钮添加另一个复选框
- 添加另一个 JavaScript 时出现 JavaScript 问题
- iMacros 循环然后停止,然后添加另一个命令
- 如何向此 JavaScript 添加另一个条件
- 如何在Drupal 7中通过JS或Jquery模拟“添加另一个项目”
- 显示带有“添加另一个”按钮的选定结果的下拉列表
- 向嵌套的 JavaScript 对象添加另一个值
- 显示选择下拉列表中的结果,然后克隆并添加另一个选择
- 为什么 FirstPersonControls.js 在添加另一个事件侦听器时停止运行
- 在页面上放置一个随机生成器脚本 - 它可以工作.添加另一个具有不同名称的 - 不起作用
- 在Meteor TODO应用程序中向表单添加另一个字段
- 如何添加另一个"条目“;转换为此JSON
- 如何使用日期选择器添加另一个函数
- html:在锚点中添加另一个类