Jestem dość nowy w JS / jQuery, więc bądź miły.

Zasadniczo strona internetowa, nad którą pracuję, ma mapę zawierającą kilka numerowanych znaczników. Od 1 do 28. Znaczniki składają się z jednego tła Sprite, z deklaracjami dotyczącymi pozycji w tle dla każdego numeru.

Zwykle tworzyłbym CSS Sprite i użyj pozycji pozycji i nazwisk, aby pokazać poprawny znacznik numerów.

Ale ponieważ istnieje 28 markerów, jest bardzo męczący, aby wykreślić dokładne pozycje tła dla każdego markera.

Gram wokół tego kodu, który zrobiłem;

http://jsfiddle.net/bazzle/6mn9z/1/

HTML:

<div class="label-1">
This label 1
</div>

<div class="label-2">
This label 2
</div>

JS:

var label = '1';
var pos = '0';

while (label <= 28){
$(".label-" + label).css('background-position-x',pos + 'px');
label = label + 1;
pos = pos + 14;
};

Próbuję uzyskać skrypt, aby przypisać nową regułę CSS w tle dla każdej etykiety (.Label- #), które zmienia się na każdym przebiegu pętli. Jeśli to ma sens.

Tak więc na drugim przebiegu pętli, pozycja w tle-X daje 14px. I że CSS jest stosowany do .label-2.

Czuję, że jestem prawie tam, ale coś brakuje.

Wielkie dzięki.

Edytuj: W celu przyszłego odniesienia nie używaj pozycji - X, ponieważ nie działa w Firefoksie. Zamiast tego użyj pozycji tła.

2
bazzlebrush 2 grudzień 2013, 20:22

3 odpowiedzi

Najlepsza odpowiedź

Zgłaszałeś licznik etykiety jako łańcuch. Dodanie 1 do niego spowoduje to powiązanie, więc druga wartość etykiety jest "11".

Naprawić:

var label = 1;

Nie martw się, zostanie odpowiednio przekonwertowany do łańcucha w selektorze.

(tak samo dla pozycji)

0
Tibos 2 grudzień 2013, 16:26

Zmiana:

var label = '1';
var pos = '0';

Dla

var label = 1;
var pos = 0;

Próbujesz dodać ciągi, więc 1 '+ 1 = 11

0
Aguardientico 2 grudzień 2013, 16:28

Nieco bardziej skomplikowany (i ogólny) sposób na to:

JSFIDDLE

Daj wszystkie elementy tej samej klasy i klasę do identyfikacji pozycji etykiety:

<div class="label label-1">This label 1</div>
<div class="label label-2">This label 2</div>

Następnie pętla nad elementami za pomocą .each() w jQuery. Jeśli etykiety znajdują się w kolejności rosnącej, możesz po prostu to zrobić (ignorowanie klasy label-*):

$( '.label' ).each( function(i){
       $( this ).css( 'background-position-x', (14*i) + 'px' );
});

Jeśli etykiety nie są w porządku rosnącym (lub jeśli pominiesz na etykiecie), możesz pętlować się nad nimi i wyodrębnić wartości etykiety wyrażeniem regularnym:

$( '.label' ).each( function(i){
       var t = $(this),
           p = parseInt( t.attr( 'class' ).match( /\blabel-(\d+)\b/ )[1] );
       if ( !isNaN( p ) )
       {
           t.css( 'background-position-x', (14*(p-1)) + 'px' );
           console.log( i + ": " + p );
       }
});
0
MT0 2 grudzień 2013, 16:49