Javascript string.slice() mit negativen Werten

Question

Ich versuche, divs basierend auf dem Titel der Seite zu verbergen oder anzuzeigen. Dies ist nur erforderlich, weil ich keinen besseren Weg finde, einen Wert in die Seite zu übertragen.

Hier ist der aktuelle Code in der HTML-Datei:

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); 
     } 
    } 
} 

auch in der HTML-Datei wird ein Header mit dem Seitentitel. Der %% GLOBAL_PageTitle %% wird im serverseitigen Code ersetzt, auf den ich keinen Zugriff habe. Die Werte werden jedoch "100-Dollar-Gebühr" (mit unterschiedlichen Nummern) sein.

<h1 id="Title" class="TitleHeading">%%GLOBAL_PageTitle%%</h1> 

Schließlich Ich habe eine Reihe von versteckten Divs mit ids im Format Beschr + eine Zahl, so dass, wenn der Seitentitel ist „$ 100 Fee“ Ich mag die div mit dem id „descr100“ zeigen.

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

Wenn das Skript oben läuft, bekomme ich keinen Fehler (ich Chrome-Konsole), aber das div nicht zeigen. Ich weiß, dass die Toggle-Funktion funktioniert, weil sie zuvor nur mit einem einzigen div auf der Seite verwendet wurde, die umgeschaltet werden musste. Ich habe die togglePayLink-Funktion geschrieben, von der ich annehme, dass sie das Problem ist, aber ich habe keine Ahnung, wie ich das austesten soll. Ich habe mich gefragt, ob das Dollarzeichen im Titel Probleme verursachen könnte, aber ich würde denken, dass ich einen Fehler bekommen würde, wenn das der Fall wäre.

EDIT: Changed die togglePayLink -Funktion, um var anstelle von Zeichenfolge zu verwenden, aber ich erhalte einen TypeError, wenn slice() aufgerufen wird.

Answer 1

title.slice (-4) gab mir die letzten vier Ziffern der Zeichenfolge statt alles vor den letzten vier Ziffern, wie ich dachte, es würde. Das Umschalten des nicht vorhandenen 'descrFee' divs hat nichts bewirkt.

Answer 2

Das Problem ist hier:

String title = h1Array[i].innerHTML; 

In Javascript, alle Variablen mit var gesetzt sind (mit Ausnahme der Funktionen, die andere Art und Weise eingestellt werden kann). Es wäre also:

var title = h1Array[i].innerHTML; 

Zusätzlich Sie es wahrscheinlich außerhalb der for-Schleife zu definieren, in dem Fall, dass Sie die „var“ würde weglassen, wenn Sie es in der for-Schleife setzen:

<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> 

Edit: Wenn Sie es nur in der for-Schleife verwenden, aber es in verschiedenen Iterationen verwenden, dann bin ich nicht sicher, ob es lokal definiert werden kann. Ich würde es dennoch global definieren.

Answer 3

In Zukunft sollten Sie wahrscheinlich der Seite eine eindeutige Klasse zuweisen, indem Sie %% GLOBAL_PageTitle %% verwenden. Auf diese Weise können Sie Elemente mit CSS ein-/ausblenden.

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

Für Seiten, die BigCommerce keinen Zugriff des h1 zu dem HTML-Code für jede einzelne Seite nicht geben (ex. Web-Seiten, Konto, Warenkorb), betreibe ich in der Regel dieses Skript auf Seite laden den Seitentitel strippen von Leerzeichen und anderen Zeichen und weisen dem Seitenelement eine bestimmte Klasse zu.

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

Die Art, wie Sie es tun, scheint ein wenig übertrieben, aber wenn es auf diese Weise von jemand anderem eingerichtet wurde, verstehe ich.