Javascript string.slice() 为负值

Question

我正在尝试根据页面标题隐藏或显示 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>

最后，我有一组隐藏的 divs，id 的格式为 descr + 数字，所以如果页面标题是“100 美元费用”，我想显示 div ID "descr100".

<div id="descr100" style="display:none;width: 75%;"></div>

当上面的脚本运行时，我没有收到任何错误（我正在使用 chrome 的控制台），但是 div 没有显示。我知道切换功能有效，因为它以前只在必须切换的页面上与一个 div 一起使用。我编写了 togglePayLink 函数，我认为这是问题所在，但我不知道如何调试它。我想知道标题中的美元符号是否会导致问题，但我想如果是这样的话我会得到一个错误。

编辑：将 togglePayLink 函数更改为使用 var 而不是字符串，但是在调用 slice() 时出现类型错误。

Answer 1

问题出在这里：

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循环中使用它，但在不同的迭代中使用它，那么我不确定它是否可以在本地定义。不过，我仍然会在全球范围内定义它。

Answer 2

今后，您可能应该使用 %%GLOBAL_PageTitle%% 为页面分配一个唯一的 class。这样您就可以使用 CSS show/hide 个元素。

<div class="page %%GLOBAL_PageTitle%%">

对于 BigCommerce 不允许访问每个单独页面（例如网页、帐户、购物车）h1 的 HTML 的页面，我通常运行页面上的此脚本加载以去除空格和其他字符的页面标题，并为页面元素分配特定的 class。

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+'');

你的做法有点过头了，如果是别人这样设置的，我理解。

Answer 3

title.slice(-4) 给了我字符串的最后四位数字，而不是我想的最后四位数字之前的所有内容。切换不存在的 'descrFee' div 没有做任何事情。

Javascript string.slice() 为负值

Javascript string.slice() with negative values

html

javascript

bigcommerce