Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Fade in x antal element från lista med flera

Svara
2018-03-23, 07:00
  #1
GillJung
Medlem
GillJungs avatar
Jag har en massa list-föremål med bilder och text (100 st) där jag endast vill visa de 20 första. Tanken är att man sen ska kunna trycka på en knapp så visas 20 till och så vidare. Jag har än så länge bara lyckats skapa ett skrift som visar alla list-föremål en efter en.

HTML
HTML-kod: 
<li>
    <img src="img/image (1).png" width="100%" height="auto"/>
</li>

<li>
    <img src="img/image (2).png" width="100%" height="auto"/>
</li>

<li>
    <img src="img/image (3).png" width="100%" height="auto"/>
</li>

[...]

Javascript
Kod: 
var image = $("li");

for (var i = 0; i < image.length; i++) {

    var target1 = Math.floor(Math.random() * image.length -1) + 1;
    var target2 = Math.floor(Math.random() * image.length -1) + 1;
	
    image.eq(target1).before(image.eq(target2));
	
}

Någon som har något bra förslag på en lösning?
Citera
2018-03-23, 11:35
  #2
Nich
Medlem
Pysslade ihop den här lösningen. Kanske kan det hjälpa dig?

HTML-kod: 
<ul id="list"></ul>
<button id="show20">Visa 20 till</button>

Kod: 
//Skapar en lista i testsyfte
for(var i = 1; i <= 100; i++) {
	let item = document.createElement( "li" );
  item.innerHTML = i;
	$( '#list' ).append( item );
}

var items = $( '#list li' );
var show_number = 0;

function showItems() {
	show_number = show_number + 20;
	items.slice( 0, show_number ).show();
  if( show_number >= items.length ) {
  	$( '#show20' ).prop('disabled', true);
  }
}

$( '#show20' ).click( function() {
	showItems();  
} );

items.hide();
showItems();

Se resultat på JSFiddle: https://jsfiddle.net/u4zydngt/21/
Citera
2018-03-24, 07:26
  #3
GillJung
Medlem
GillJungs avatar
Citat:
Ursprungligen postat av Nich
Pysslade ihop den här lösningen. Kanske kan det hjälpa dig?

HTML-kod: 
<ul id="list"></ul>
<button id="show20">Visa 20 till</button>

Kod: 
//Skapar en lista i testsyfte
for(var i = 1; i <= 100; i++) {
	let item = document.createElement( "li" );
  item.innerHTML = i;
	$( '#list' ).append( item );
}

var items = $( '#list li' );
var show_number = 0;

function showItems() {
	show_number = show_number + 20;
	items.slice( 0, show_number ).show();
  if( show_number >= items.length ) {
  	$( '#show20' ).prop('disabled', true);
  }
}

$( '#show20' ).click( function() {
	showItems();  
} );

items.hide();
showItems();

Se resultat på JSFiddle: https://jsfiddle.net/u4zydngt/21/

Dur ett geni! Tackar Nu blir det att sitta och analysera lite och se vad du gjort.
Citera
Svara

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback