Ändern einer sIFR-Farbe für "Aktuelles Element" ohne erneutes Laden der Seite

Question

Grüße!

Ich habe eine Beitrag, der meinem Problem ähnelt Das war eine nette Antwort, aber es hat die Farbe von ALLEN <h1> Instanzen mit einer Javascript-Funktion.

Ich versuche, die Farbe eines einzelnen sIFR'd-Nav-Elements in einer Liste zu ändern, um eine andere Farbe zu haben, ohne die Seite neu zu laden - also müssten die anderen "ausgeschaltet" werden (Farbe auf Standard zurückgesetzt). Hat jemand eine Idee?

// Modified function from other post, obviously does not work
function changeColor(idNum) {
  var css = '.sIFR-root { color:#522d24; }'; 
  for (var i = 0; i < sIFR.replacements['a'+idNum].length; i++) {
    sIFR.replacements['a'+idNum][i].changeCSS(css); // change to brown color
  }
}

Ich versuche, eine Liste von Ankern innerhalb von <h6> mit jeweils einer eindeutigen ID (kann zu jedem h6 hinzugefügt werden).

// sIFRized HTML list I am targeting, items are all teal color
    <h6><a href="javascript:changeColor('0');" id="catLink0">Shop</a></h6>
    <h6><a href="javascript:changeColor('1');" id="catLink1">Dine</a></h6>
    <h6><a href="javascript:changeColor('2');" id="catLink2">Play</a></h6>
    <h6><a href="javascript:changeColor('3');" id="catLink3">Services</a></h6>

// sIFR replacement 
sIFR.replace(archerSemibold, {
  selector: 'h6',
  wmode: 'transparent',
  css: ['.sIFR-root { background-color:#587b7c; color:#627d79;  }'
        ,'.brown { color:#542d24; }'
        ,'a { text-decoration: none; color: #627d79; }'
        ,'a:link { text-decoration:none; color: #627d79; }'
        ,'a:hover { text-decoration:none; color: #5b1300; }'
    ]
});

Hier ist die Seite für den Fall, dass Sie etwas Kontext wünschen. Ich bin noch zu entscheiden, wie ich "filtern" die Karte Inhalte auf der linken Seite, entweder mit AJAX oder ein Javascript zeigen/ausblenden - daher meine Notwendigkeit für diese Lösung.

Vielen Dank im Voraus!

Answer 1

Sie brauchen nur:

function changeColor(idNum) {
  var css = '.sIFR-root { color:#522d24; }'; 
  sIFR.replacements['h6'][idNum].changeCSS(css); // change to brown color
}

Answer 2

Das hat funktioniert, und ich habe ein weiteres Problem gelöst.

Ich musste automatisch meine changeColor() Funktion für einen "aktuellen" Artikel nachdem der sIFR geladen hatte . Da ich nur eine Zeichenkette/Zahl an changeColor() war es eigentlich ganz einfach.

sIFR.replace(archerSemibold, {
    selector: 'h6',
    wmode: 'transparent',
    css: ['.sIFR-root { background-color:#587b7c; color:#627d79;  }'
      ,'a { text-decoration: none; color: #627d79; }'
      ,'a:link { text-decoration:none; color: #627d79; }'
      ,'a:hover { text-decoration:none; color: #5b1300; }'
      ],
    onReplacement: function(){ 
      changeColor('0'); // safely re-styles default current item
    }
});

function changeColor(num) {
    var defaultCSS = ['a:link { color:#627d79; text-decoration:none; }', 
                      'a:hover { color:#522d24; }'
                     ];
    for (var i = 0; i < sIFR.replacements['h6'].length; i++) {
         sIFR.replacements['h6'][i].changeCSS(defaultCSS);
    }

    var curCSS = ['a:link { color:#522d24; text-decoration:underline; }',
                  'a:hover { color:#627d79; }'
                 ];
    sIFR.replacements['h6'][num].changeCSS(curCSS);
}