gpt4 book ai didi

javascript - 检查 id 标签内的文本并将类添加到另一个标签

转载 作者:行者123 更新时间:2023-12-02 19:23:28 24 4
gpt4 key购买 nike

我有不同的页面,需要根据 id=section-name 中的文本使用不同的横幅图像。我想使用 Javascript 或 jQuery 来检查页面正在使用哪个部分名称,然后将 CSS 类添加到横幅容器 id。

这适用于 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,则添加类banner-toll - <div id="banner-container" class="banner-toll"></div> ;或
  • 如果部分名称等于 Whats On,则添加类banner-whatson - <div id="banner-container" class="banner-whatson"></div> ;或
  • 如果节名称等于Christmas Festival,则添加类banner-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] || '');
}
}

关于javascript - 检查 id 标签内的文本并将类添加到另一个标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12273069/

24 4 0