我试图隐藏或显示基于页面标题的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文件中还有一个带有页面标题的标题。 %% GLOBAL_PageTitle %%将替换为我无法访问的服务器端代码。但是,价值将是&#34; $ 100费用&#34; (有不同的数字)。
<h1 id="Title" class="TitleHeading">%%GLOBAL_PageTitle%%</h1>
最后,我有一组隐藏的div,其格式为descr +一个数字,所以如果页面标题为&#34; $ 100费用&#34;我想用id&#34; descr100&#34;来显示div。
<div id="descr100" style="display:none;width: 75%;"></div>
当上面的脚本运行时,我没有收到错误(我使用chrome&#39; s控制台),但div没有显示。我知道切换功能有效,因为它之前只与页面上的一个div一起使用,必须切换。我写了togglePayLink函数,我认为这是问题,但我不知道如何调试它。我想知道标题中的美元符号是否会导致问题,但我认为如果是这样的话,我会收到错误。
编辑:更改了togglePayLink函数以使用var而不是string,但是当调用slice()时我得到一个typeError。
答案 0 :(得分:1)
展望未来,您应该只使用%% 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+'');
你这样做的方式似乎有点过头了,但是如果它是由其他人以这种方式设置的,我理解。
答案 1 :(得分:0)
问题在于:
String title = h1Array[i].innerHTML;
在Javascript中,所有变量都使用var设置(函数除外,可以通过其他方式设置)。所以它会是:
var title = h1Array[i].innerHTML;
此外,您可能必须在for循环之外定义它,在这种情况下,当您在for循环中设置它时,您将省略“var”:
<script language="javascript">
var title;
function togglePayLink() {
var h1Array = document.getElementsByTagName("h1");
for(i = 0; i < h1Array.length; i++){
if(h1Array[i].id == 'Title'){
title = h1Array[i].innerHTML;
title = title.slice(1);
title = title.slice(-4);
toggle('descr'+ title);
}
}
}
</script>
编辑:如果你只在for循环中使用它,但是在不同的迭代中使用它,那么我不确定它是否可以在本地定义。不过,我仍然会在全球范围内定义它。
答案 2 :(得分:0)
title.slice(-4)给了我字符串的最后四位数而不是最后四位数之前的所有数字,就像我想的那样。切换不存在的&#39; descrFee&#39; div没有做任何事情。