Forum Mjukvara Programmering och digitalt skapande Tråd

Problem med att visa boxar, jQuery

1
Skriv svar
Permalänk
Medlem
●

Problem med att visa boxar, jQuery

Hejsan,

Jag försöker få vissa divoboxar att synas beroende på vad man valde för något i en li-lista.

$('ul#payment_options li').click(function() {
   var value = $(this).attr("id");
   $('#temp').load("temp_address.php", {'address': address});
   if(value == 1)
   {
      $('#next2').click(function() {
         $('#payment2').fadeIn('slow');
      });
         
   }
 
   if(value == 2)
   {
      $('#next2').click(function() {
         $('#payment3').fadeIn('slow');
      });
   }   
   });
});

html

<ul id="payment_options">
   <li id="1"><input type="radio" name="payoption"  value="cash_on_delivery"> Postförskott (49)</li>
   <li id="2"><input type="radio" name="payoption" value="card_payment"> Kortbetalning via postens betalväxel</li>
   <li id="3"><input type="radio" name="payoption" value="prepayment"> Förskottsbetalning på postgiro</li>
   <li id="4"><input type="radio" name="payoption" value="bill"> Faktura 14 dagar</li>
   <input type="submit" name="next2" value="Välj" id="next2">
</ul>

När man väljer det första alternativet i listan, så funkar det utan problem, men väljer man det andra alternativet i listan som har värdet 2, så visas inte boxen som jag vill skall visas.

När man väljer det första alternativet så syns inte bara den boxen som tillhör 1:an, utan den som tillhör 2:an visas även.

Någon som har någon idé på vad det kan vara? Observera att javascript-koden ligger under html-koden i filen.

Visa signatur

http://ocnordic.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Brajan:

Hejsan,

Jag försöker få vissa divoboxar att synas beroende på vad man valde för något i en li-lista.

$('ul#payment_options li').click(function() {
   var value = $(this).attr("id");
   $('#temp').load("temp_address.php", {'address': address});
   if(value == 1)
   {
      $('#next2').click(function() {
         $('#payment2').fadeIn('slow');
      });
         
   }
 
   if(value == 2)
   {
      $('#next2').click(function() {
         $('#payment3').fadeIn('slow');
      });
   }   
   });
});

html

<ul id="payment_options">
   <li id="1"><input type="radio" name="payoption"  value="cash_on_delivery"> Postförskott (49)</li>
   <li id="2"><input type="radio" name="payoption" value="card_payment"> Kortbetalning via postens betalväxel</li>
   <li id="3"><input type="radio" name="payoption" value="prepayment"> Förskottsbetalning på postgiro</li>
   <li id="4"><input type="radio" name="payoption" value="bill"> Faktura 14 dagar</li>
   <input type="submit" name="next2" value="Välj" id="next2">
</ul>

När man väljer det första alternativet i listan, så funkar det utan problem, men väljer man det andra alternativet i listan som har värdet 2, så visas inte boxen som jag vill skall visas.

När man väljer det första alternativet så syns inte bara den boxen som tillhör 1:an, utan den som tillhör 2:an visas även.

Någon som har någon idé på vad det kan vara? Observera att javascript-koden ligger under html-koden i filen.

Gå till inlägget

Jag meckade om det lite. Du har inte med dina "#payment" i koden så jag "bevisade" funktionaliteten med alert istället.

http://jsfiddle.net/tcmwA/

Om funktionaliteten du gör ska vara identisk så borde du ha en bra namnkonvention istället för att göra en if-sats för varje val.

Posta gärna mer kod om du orkar.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Pillade också ihop en liten fiddle: http://jsfiddle.net/PuyDP/9/

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Leedow:

Jag meckade om det lite. Du har inte med dina "#payment" i koden så jag "bevisade" funktionaliteten med alert istället.

http://jsfiddle.net/tcmwA/

Om funktionaliteten du gör ska vara identisk så borde du ha en bra namnkonvention istället för att göra en if-sats för varje val.

Posta gärna mer kod om du orkar.

Gå till inlägget

En switch-sats borde vara att föredra?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Tänkte bara tipsa att om du vill använda fadeIn()/fadeOut() för att göra en snygg övergång så märkte jag själv när jag höll på med en liknande lösning att det blir mycket snyggare om du använder fadeIn() utan timer och seda en hide() för att dölja det andra elementet. annars har det en tendens att hacka till när du klickar på knappen när det gamla elementet ska bort och det nya skall visas.

exempelvis såhär: http://jsfiddle.net/2D9fe/

Visa signatur

Cisco - Linux - VMWare
-- Citera mig om ni vill få återkoppling --

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av mel0dy:

En switch-sats borde vara att föredra?

Gå till inlägget

Nja, det blir ju samma sak egentligen.
Koden som görs i varje if-sats är ju identisk förutom namnet på objektet. Alltså borde en namnkonvention lösa det.

Tidigare:

if(value == 1)
   {
      $('#next2').click(function() {
         $('#payment2').fadeIn('slow');
      });
         
   }
 
   if(value == 2)
   {
      $('#next2').click(function() {
         $('#payment3').fadeIn('slow');
      });
   }

Exempel på förbättring:

$('#next2').click(function() {
	var radiobuttonvalue = $('#payment_options li input:radio[name="payoption"]:checked').val();
	$('#'+radiobuttonvalue).fadeIn('slow'); //id:t på "payment3" bör alltså vara "card_payment" istället.
});
Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för alla svar!

Skrivet av Leedow:

Jag meckade om det lite. Du har inte med dina "#payment" i koden så jag "bevisade" funktionaliteten med alert istället.

http://jsfiddle.net/tcmwA/

Om funktionaliteten du gör ska vara identisk så borde du ha en bra namnkonvention istället för att göra en if-sats för varje val.

Posta gärna mer kod om du orkar.

Gå till inlägget

Din kod vill inte fungera för mig. Det händer samma sak som med min kod. Alltså, när man väljer exempelvis kortbetalning, så visas inte min box. Men väjer jag det första alternativet, det vill säga Postförskott, då visas boxen tillhörande postförskott och även kortbetalning.

Här mer kod från min ursprungskod:

<div id="payment">
<p>Du kan välja att betala på tre olika sätt hos oss. Antingen postförskott, kontokort eller förskott via postgiro eller bankgiro. Väljer du att betala i förskott skickas varorna när betalningen är registrerad.</p>

<ul id="payment_options">
	<li id="1"><input type="radio" name="payoption"  value="cash_on_delivery"> Postförskott (49)</li>
	<li id="2"><input type="radio" name="payoption" value="card_payment"> Kortbetalning via postens betalväxel</li>
	<li id="3"><input type="radio" name="payoption" value="prepayment"> Förskottsbetalning på postgiro</li>
	<li id="4"><input type="radio" name="payoption" value="bill"> Faktura 14 dagar</li>
	<input type="submit" name="next2" value="Välj" id="next2">
</ul>

</div>

<div id="payment2">
<?php
	include("payment2.php");
?>
</div>

<div id="payment3">
HEJ
<?php
	#include("payment3.php");
?>
</div>

<div id="payment4">
<?php
	#include("payment4.php");
?>
</div>

<div id="payment5">
<?php
	#include("payment5.php");
?>
</div>

</div>
<script type="text/javascript">

$(document).ready(function(){
	var address = $('#address').val();
	var value = false;

$('#address').change(function() {
	address = $(this).val();
});

$('#next').click(function() {
	$('#payment').fadeIn('slow');
	$('#first').fadeOut(); 
});

$('ul#payment_options li').click(function() {
	var value = $(this).attr("id");
	$('#temp').load("temp_address.php", {'address': address});
	if(value == 1)
	{
		$('#next2').click(function() {
			$('#payment2').fadeIn('slow');
		});
			
	}

	if(value == 2)
	{
		$('#next2').click(function() {
			$('#payment3').fadeIn('slow');
		});
	}	
   });
});
</script>

Alerten som du skrev fungerar utmärkt. Men det är när jag ska visa boxar genom fadeIn eller show som det inte alls vill fungera.

Visa signatur

http://ocnordic.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

något sånt här kanske?
http://jsfiddle.net/adw4g/

Visa signatur

as far as we can tell, the massacre went well...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Detta borde fungera rakt av på din kod:
http://jsfiddle.net/PuyDP/12/

Byt ut följande mot ovanstående:

$('ul#payment_options li').click(function() { 
    var value = $(this).attr("id"); 
    $('#temp').load("temp_address.php", {'address': address}); 
    if(value == 1) 
    { 
        $('#next2').click(function() { 
            $('#payment2').fadeIn('slow'); 
        }); 
             
    } 

    if(value == 2) 
    { 
        $('#next2').click(function() { 
            $('#payment3').fadeIn('slow'); 
        }); 
    }     
   }); 
});
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Brajan:

Alerten som du skrev fungerar utmärkt. Men det är när jag ska visa boxar genom fadeIn eller show som det inte alls vill fungera.

Gå till inlägget

Jag har uppdaterat min variant baserat på all extra kod du bifogade.

http://jsfiddle.net/tcmwA/1/

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Leedow:

Jag har uppdaterat min variant baserat på all extra kod du bifogade.

http://jsfiddle.net/tcmwA/1/

Gå till inlägget

Fantastiskt. Och era förslag som ni postade i början fungerade också. Det var jag som hade glömt att avsluta en div. Klantigt av mig. TACK så jättemycket för era förbättrade script

Visa signatur

http://ocnordic.com

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara