我试图根据页面标题隐藏或显示 div。这只是必需的,因为我无法找到将值传递到页面的更好方法。
这是 HTML 文件中的当前代码:
function toggle(divId) {
var divArray = document.getElementsByTagName("div");
for(i = 0; i < divArray.length; i++){
if(divArray[i].id == divId){
if(divArray[i].style.display != 'none'){
divArray[i].style.display = 'none';
}else{
divArray[i].style.display = '';
}
}
}
}
function togglePayLink() {
var h1Array = document.getElementsByTagName("h1");
for(i = 0; i < h1Array.length; i++){
if(h1Array[i].id == 'Title'){
var title = h1Array[i].innerHTML;
title = title.slice(1);
title = title.slice(-4);
toggle('descr'+ title);
}
}
}
HTML 文件中还有一个带有页面标题的 header 。 %%GLOBAL_PageTitle%% 在我无权访问的服务器端代码中被替换。但是,这些值将为“$100 费用”(具有不同的数字)。
<h1 id="Title" class="TitleHeading">%%GLOBAL_PageTitle%%</h1>
最后,我有一组隐藏的 div,其 id 的格式为 descr + 数字,因此,如果页面标题是“$100 Fee”,我想显示 id 为“descr100”的 div。
<div id="descr100" style="display:none;width: 75%;"></div>
当上面的脚本运行时,我没有收到错误(我使用的是 chrome 的控制台),但 div 不显示。我知道切换功能有效,因为它以前只与页面上必须切换的单个 div 一起使用。我编写了togglePayLink 函数,我认为这是问题所在,但我不知道如何调试它。我想知道标题中的美元符号是否会引起问题,但我认为如果是这样的话我会收到错误。
编辑:更改了togglePayLink函数以使用var而不是字符串,但在调用slice()时我收到了typeError。
最佳答案
展望 future ,您可能应该使用 %%GLOBAL_PageTitle%% 为页面分配一个唯一的类。这样您就可以使用 CSS 显示/隐藏元素。
<div class="page %%GLOBAL_PageTitle%%">
对于 BigCommerce 不允许访问每个单独页面的 h1 HTML 的页面(例如网页、帐户、购物车),我通常在页面加载时运行此脚本,以去除页面标题中的空格和其他内容字符,并为页面元素分配特定的类。
var catName = $('.TitleHeading').text();
var catName = catName.replace(/ /g, '');
var catName = catName.replace(/'/g, '');
var catName = catName.replace(/&/g, '');
var catName = $.trim(catName);
$('.page').addClass(''+catName+'');
你这样做的方式似乎有点过头了,但如果是其他人这样设置的,我理解。
关于带有负值的 Javascript string.slice(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36993971/