Εναλλαγή class αριστερόστροφα...

[rafinos]

Γεια σας παιδιά!

 

Έχω κάποια κουμπιά (δεν μας ενδιαφέρει το πόσα είναι αυτά) τα οποία τα εμφανίζω με μια for() ανά τρία. Τα κουμπιά κάθε σειράς διαφέρουν ως προς την κλάση που έχουν. 

 

Τα κουμπιά της πρώτης σειράς για παράδειγμα έχουν τις παρακάτω κλάσεις:

 

1o = .black

2o = .pink

3o = .cyan

 

Αυτό που θέλω εγώ σε κάθε σειρά οι κλάσεις να πηγαίνουν ένα κλικ αριστερά.

 

Π.χ. θέλω οι κλάσεις να πηγαίνουν όπως παρακάτω:

//proti seira
.black  .pink   .cyan
//deuteri seira
.pink   .cyan   .black
//triti seira
.cyan   .black  .pink

kai paei legontas

Έχει κανείς καμιά ιδέα; Αν και σαν πρώτη σκέψη μου φάνηκε τόσο εύκολο... κόλλησα.

 

Τα κουμπιά τα δημιουργώ με τον παρακάτω κώδικα:

var content = "";
var count = 1;

for(var i=1; i<=x; i++){

	if(count === 1){
		content += '<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 row_buttons">';
	}

	content += '<div class="container col-lg-4 col-md-4 col-sm-4 col-xs-4">';
	content += '<div class="button_container">';

	content += '<a id="' + i + '" href="#" class="btn btn-lg col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">i</a>';

	content += '</div></div>';

	if(count === 3){
		count = 1;
		content += '</div>';
	}else{
		count++;
	}
}

[k33theod]

Μήπως να έκανες classes.push(classes.shift()) βγαίνει από μπροστά μπαίνει από πίσω

[defacer]

Μήπως να μην έκανες τίποτα τέτοιο και αντί γι αυτό να έκανες π.χ. κάτι σαν αυτό; CSS only, very good browser compatibility.

 

Διαφορετικά απλά κρατάς counters γραμμή x στήλη y και 

let classes = ["foo", "bar", "baz"];
thisClass = classes[(x * 3 + y) % 3];

Σε αντίθεση με το css-only όμως, αν αλλάξει οτιδήποτε (αριθμός γραμμών, στηλών) πρέπει να ξαναβάλεις τα σωστά classes μόνος σου, ενώ στο css-only δε χρειάζεται να κάνεις απολύτως τίποτα.

[rafinos]

Μήπως να μην έκανες τίποτα τέτοιο και αντί γι αυτό να έκανες π.χ. κάτι σαν αυτό; CSS only, very good browser compatibility.

 

Διαφορετικά απλά κρατάς counters γραμμή x στήλη y και 

let classes = ["foo", "bar", "baz"];
thisClass = classes[(x * 3 + y) % 3];

Σε αντίθεση με το css-only όμως, αν αλλάξει οτιδήποτε (αριθμός γραμμών, στηλών) πρέπει να ξαναβάλεις τα σωστά classes μόνος σου, ενώ στο css-only δε χρειάζεται να κάνεις απολύτως τίποτα.

Ή κάτι στην πράξη σου είναι λάθος, ή εγώ κάνω κάτι λάθος.

[k33theod]

var classes=['.black', '.pink', '.cyan'];

undefined
classes.push(classes.shift());
3
classes;
Array [ ".pink", ".cyan", ".black" ]
classes.push(classes.shift());
3
classes;
Array [ ".cyan", ".black", ".pink" ]
classes.push(classes.shift());
3
classes;
Array [ ".black", ".pink", ".cyan" ]

και κάθε φορά που θα παίρνεις τα classes[0], classes[1], classes[2] για τις 3άδες των κουμπιών σου θα έχεις τη σωστή κλάση σε κάθε κουμπί

[rafinos]

Νομίζω πως το βρήκα.

 

Η λύση είναι αυτή:

classes.push(classes.splice(classes[0], 1)[0]);

Κάθε φορά που αλλάζω γραμμή περνάω το πρώτο στο τέλος. 

[k33theod]

Νομίζω πως το βρήκα.

 

Η λύση είναι αυτή:

classes.push(classes.splice(classes[0], 1)[0]);

Κάθε φορά που αλλάζω γραμμή περνάω το πρώτο στο τέλος. 

Νομίζω κάνει το ίδιο με  το classes.push(classes.shift())

[rafinos]

Νομίζω κάνει το ίδιο με  το classes.push(classes.shift())

Αν και δουλεύει δεν καταλαβαίνω πως ενώ σβήνουμε το πρώτο αρχείο του πίνακα αυτό πηγαίνει στο τέλος.

[k33theod]

Αν και δουλεύει δεν καταλαβαίνω πως ενώ σβήνουμε το πρώτο αρχείο του πίνακα αυτό πηγαίνει στο τέλος.

H .shift() το σβήνει από τη λίστα και το επιστρέφει

shift() Removes the first element of an array, and returns that element

[rafinos]

Ετσι είναι όταν δίνεις βάση στο πρώτο μισό της πρότασης.

[k33theod]

To έγραψα πιο πάνω, "Βγαίνει από μπροστά και μπαίνει από πίσω", αλλά το αγνόησες επειδή είχε σεξουαλικό υπονοούμενο 

Σε κάθε περίπτωση το αντίστροφο είναι επικίνδυνο

[rafinos]

To έγραψα πιο πάνω, "Βγαίνει από μπροστά και μπαίνει από πίσω", αλλά το αγνόησες επειδή είχε σεξουαλικό υπονοούμενο

Σε κάθε περίπτωση το αντίστροφο είναι επικίνδυνο

Οχι το είχα δοκιμάσει, αλλά μάλλον είχα κάνει κάποιο λάθος με τα ifs.

[defacer]

Ή κάτι στην πράξη σου είναι λάθος, ή εγώ κάνω κάτι λάθος.

 

Δεν ξέρω τι κάνεις οπότε δεν ξέρω και ποιό είναι το λάθος 

 

Βασικά τώρα που το βλέπω, θα έπρεπε να είναι x + y και όχι 3x + y 

 

Επίσης να πω για τα πρακτικά ότι η λύση με shift/push διαβάζεται πολύ ευχάριστα μεν αλλά τη θεωρώ "λάθος" επειδή α) κάνει συνέχεια αχρείαστες κινήσεις και β) δεν προσφέρει random access (αν ρωτήσω "τι class πάει στη γραμμή Χ στήλη Υ" δε μπορεί να το απαντήσει χωρίς να υπολογίσει πρώτα όλα τα προηγούμενα). Δηλαδή, αν ήταν για καμιά βλακεία θα τη χρησιμοποιούσα ίσως στην πράξη, αλλά μόνο αφότου ήμουν 200% σίγουρος ότι το έχω για τις εναλλακτικές με modulo.