Code voor meerdere elementen gebruiken
Zelf heb ik een orderbutton gemaakt met een quantity plus en min knop.
Op de artikelpagina werkt de button prima echter zodra ik mijn design op de artikellijst pagina wil gebruiken gaat het mis. Nu ben ik erachter gekomen wat het probleem is.
Op de artikellijst pagina worden 30 artikelen getoond, zodra je de eerst button aanklikt op de pagina telt hij 30 erbij. Dit komt omdat de id's het zelfde zijn. Hoe kan ik zorgen dat als ik op de plus en min klik dat hij kijkt naar de quantity die daarbij hoort?
Werken met this en hoe verwerk ik dat in mijn code?
html:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<orderit>
<input id="quantity" value="1"/>
<div class="quantity-buttons">
<div id="plus">+</div>
<div class="plus-minus_space"></div>
<div id="minus">-</div>
</div>
<input name="orderbutton" type="submit" class="orderbutc" value="In winkelwagen" onclick="$.add2cart( 'product_{$article.nr}', 'cart')"></input>
</orderit>
<input id="quantity" value="1"/>
<div class="quantity-buttons">
<div id="plus">+</div>
<div class="plus-minus_space"></div>
<div id="minus">-</div>
</div>
<input name="orderbutton" type="submit" class="orderbutc" value="In winkelwagen" onclick="$.add2cart( 'product_{$article.nr}', 'cart')"></input>
</orderit>
jquery:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(document).ready(function(){
//klik element
$('#plus').click(function(){
//maak variabel en pak de value
var quantity_old = $('#quantity').val();
//string pak eerste gatal
if ( parseFloat(quantity_old) >= 1 ) {
//variabel = oude variabel + 1
var quantity_new = parseFloat(quantity_old) + 1;
//value = variabel nieuw
$('#quantity').val(quantity_new);
if (quantity_new > 1){
$("#quantity").fadeIn();
};
};
});//einde klik functie
//klik element
$('#minus').click(function(){
//maak variabel en pak de value
var quantity_old = $('#quantity').val();
//string pak eerste gatal
if ( parseFloat(quantity_old) >= 2 ) {
//variabel = oude variabel - 1
var quantity_new = parseFloat(quantity_old) - 1;
//value = variabel nieuw
$('#quantity').val(quantity_new);
if (quantity_new < 2){
$("#quantity").fadeOut();
};
};
});//einde klik functie
$("#quantity").blur(function(){
if ($("#quantity").val() < 2){
$("#quantity").val("1");
$("#quantity").fadeOut()}
});
}); //einde script
//klik element
$('#plus').click(function(){
//maak variabel en pak de value
var quantity_old = $('#quantity').val();
//string pak eerste gatal
if ( parseFloat(quantity_old) >= 1 ) {
//variabel = oude variabel + 1
var quantity_new = parseFloat(quantity_old) + 1;
//value = variabel nieuw
$('#quantity').val(quantity_new);
if (quantity_new > 1){
$("#quantity").fadeIn();
};
};
});//einde klik functie
//klik element
$('#minus').click(function(){
//maak variabel en pak de value
var quantity_old = $('#quantity').val();
//string pak eerste gatal
if ( parseFloat(quantity_old) >= 2 ) {
//variabel = oude variabel - 1
var quantity_new = parseFloat(quantity_old) - 1;
//value = variabel nieuw
$('#quantity').val(quantity_new);
if (quantity_new < 2){
$("#quantity").fadeOut();
};
};
});//einde klik functie
$("#quantity").blur(function(){
if ($("#quantity").val() < 2){
$("#quantity").val("1");
$("#quantity").fadeOut()}
});
}); //einde script
Gr. Jop
Jop geen op 08/05/2015 15:50:57:
Dit komt omdat de id's het zelfde zijn.
Id's moeten uniek zijn.
Quote:
Dit komt omdat de id's het zelfde zijn.
Dit is je probleem: je artikelen hebben geen unieke identificatie (maar maken gebruik van een of ander volgnummer).
Als je aan een uniek product-id kunt refereren heb je dit probleem helemaal niet; het maakt dan immers niet uit op welke pagina dit product staat, of in welke volgorde of positie.
In de onclick staat {$article.nr} dit is een smarty output, deze geeft het artikelid mee.
nu dacht ik dit simpelweg te kunnen realiseren door {$article.nr} in de id te zetten.
Echter jquery pakt de waarde niet van {$article.nr}.
Wat zou ik dan nog kunnen doen? Natuurlijk zou ik een attribuut kunnen maken met het artikelid maar dan weet jquery nog niet om welke element het gaat.
Gr. Jop
Daarmee is je cart trouwens nog niet up-to-date met dit nieuwe aantal.
Toevoeging op 08/05/2015 16:54:35:
Jop geen op 08/05/2015 16:36:00:
Echter jquery pakt de waarde niet van {$article.nr}.
Daar zou ik dan ook eens naar kijken.
Opzich snap ik de variable this wel maar hoe pas ik die toe in de code die ik al had?
Code (php)
1
2
3
4
2
3
4
$(".plus").click(function(){
$(this)....... Nu moet hij dus bij de juiste quantity de hoeveelheid met 1 verhogen.
});
$(this)....... Nu moet hij dus bij de juiste quantity de hoeveelheid met 1 verhogen.
});
De site is gemaakt met php smarty, de scripts javascript, jquery etc worden tussen de tags gezet.
Code (php)
1
2
3
4
5
2
3
4
5
{literal}
<script>
je code
</script>
{/literal}
<script>
je code
</script>
{/literal}
Gewijzigd op 08/05/2015 19:54:25 door Jop B
Hier staat:
Quote:
If you need template tags embedded in a {literal} block, consider using {ldelim}{rdelim} to escape the individual delimiters instead.
Misschien biedt dat soelaas?
Ik zou altijd eerst proberen dit met conventionele middelen op te lossen.
Daarnaast: als alles in een omvattende container zit en/of de opbouw van elementen altijd vast is, kun je prima via jQuery "navigeren" van een button(click) naar het bijbehorende input-veld.
Als je HTML-structuur logisch is opgezet kun je overal bij.
Voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
div.element { display: block; width: 250px; margin: 10px; padding: 10px; border: 1px solid #ffcccc; }
</style>
</head>
<body>
<div class="container">
<div class="element">
<input type="text" value="" />
<button type="button" class="clickme">click</button>
</div>
<div class="element">
<input type="text" value="" />
<button type="button" class="clickme">click</button>
</div>
<div class="element">
<input type="text" value="" />
<button type="button" class="clickme">click</button>
</div>
<div class="element">
<input type="text" value="" />
<button type="button" class="clickme">click</button>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('button.clickme').click(function() {
// clear backgrounds
$('div.container div').css('background-color', '');
// clear input fields
$('div.element input').val('');
// fill background of current clicked div
$parentDiv = $(this).parent();
$parentDiv.css('background-color', '#ffcccc');
// multiple ways to navigate to the input field, this is one
$input = $parentDiv.find('input');
$input.val('clicked!');
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
div.element { display: block; width: 250px; margin: 10px; padding: 10px; border: 1px solid #ffcccc; }
</style>
</head>
<body>
<div class="container">
<div class="element">
<input type="text" value="" />
<button type="button" class="clickme">click</button>
</div>
<div class="element">
<input type="text" value="" />
<button type="button" class="clickme">click</button>
</div>
<div class="element">
<input type="text" value="" />
<button type="button" class="clickme">click</button>
</div>
<div class="element">
<input type="text" value="" />
<button type="button" class="clickme">click</button>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('button.clickme').click(function() {
// clear backgrounds
$('div.container div').css('background-color', '');
// clear input fields
$('div.element input').val('');
// fill background of current clicked div
$parentDiv = $(this).parent();
$parentDiv.css('background-color', '#ffcccc');
// multiple ways to navigate to the input field, this is one
$input = $parentDiv.find('input');
$input.val('clicked!');
});
});
//]]>
</script>
</body>
</html>
Dank voor het meedenken. In de documentatie heb ik die tags over het hoofd gezien, excuses hiervoor.
De opbouw is als volgt:
html:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form class="ordercontainer" name="product_adding" method="post" action="index.php" id="product_10351">
<input type="hidden" name="artid" value="10351">
<div class="bestelcontainer">
<div class="orderbtnblock">
<input id="quantity" name="quantity" value="1">
<div class="quantity-buttons">
<div id="plus">+</div>
<div class="plus-minus_space"></div>
<div id="minus">-</div>
</div>
<input name="orderbutton" type="submit" class="orderbutc" value="In winkelwagen" onclick="$.add2cart( 'product_10351', 'cart')">
</div>
</div>
</form>
<input type="hidden" name="artid" value="10351">
<div class="bestelcontainer">
<div class="orderbtnblock">
<input id="quantity" name="quantity" value="1">
<div class="quantity-buttons">
<div id="plus">+</div>
<div class="plus-minus_space"></div>
<div id="minus">-</div>
</div>
<input name="orderbutton" type="submit" class="orderbutc" value="In winkelwagen" onclick="$.add2cart( 'product_10351', 'cart')">
</div>
</div>
</form>
Het artikel id waar nu zoals nu bovenstaand 10351 staat word door smarty(php) neergezet
{$article.nr}
Gewijzigd op 08/05/2015 20:50:20 door Jop B
Als je voor je buttons ids gebruikt kun je deze niet hergebruiken.
Als je hier classes voor gebruikt kan dit wel (waarom trouwens divs en niet gewoon buttons?).
Je zou hier click events voor kunnen definieren. Vervolgens selecteer je met $(this).parent().parent() je orderbtn block. Plak je hier .find('input') aan vast heb je je inputveld en met .val() kun je de waarde uitlezen / wegschrijven.
EDIT: ook hier zou ik het id uit verwijderen, omdat dit herbruikbaarheid belemmert. Tenzij dat element ook echt maar 1x voorkomt op de pagina.
Gewijzigd op 08/05/2015 22:50:53 door Thomas van den Heuvel
Dit is wat ik ervan gemaakt heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//<![CDATA[
$(document).ready(function(){
//maak klik functie
$(".plus").click(function(){
var quantity_old = $(this).parent().parent().find("input[name='how-much']").val();
if ( parseFloat(quantity_old) >= 1 ) {
//variabel = oude variabel + 1
var quantity_new = parseFloat(quantity_old) + 1;
$(this).parent().parent().find("input[name='how-much']").val(quantity_new);
};
if (quantity_new > 1){
$(this).parent().parent().find("input[name='how-much']").fadeIn();
};
});
//maak klik functie
$(".minus").click(function(){
var quantity_old = $(this).parent().parent().find("input[name='how-much']").val();
if ( parseFloat(quantity_old) >= 2 ) {
//variabel = oude variabel - 1
var quantity_new = parseFloat(quantity_old) - 1;
$(this).parent().parent().find("input[name='how-much']").val(quantity_new);
};
if (quantity_new < 2){
$(this).parent().parent().find("input[name='how-much']").fadeOut();
};
});
$(".quantity").blur(function(){
if ($(this).val() < 2){
$(this).val("1");
$(this).fadeOut()
};
});
$('.quantity').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
};
});
});
//]]>
Bedankt voor de hulp :)
$(document).ready(function(){
//maak klik functie
$(".plus").click(function(){
var quantity_old = $(this).parent().parent().find("input[name='how-much']").val();
if ( parseFloat(quantity_old) >= 1 ) {
//variabel = oude variabel + 1
var quantity_new = parseFloat(quantity_old) + 1;
$(this).parent().parent().find("input[name='how-much']").val(quantity_new);
};
if (quantity_new > 1){
$(this).parent().parent().find("input[name='how-much']").fadeIn();
};
});
//maak klik functie
$(".minus").click(function(){
var quantity_old = $(this).parent().parent().find("input[name='how-much']").val();
if ( parseFloat(quantity_old) >= 2 ) {
//variabel = oude variabel - 1
var quantity_new = parseFloat(quantity_old) - 1;
$(this).parent().parent().find("input[name='how-much']").val(quantity_new);
};
if (quantity_new < 2){
$(this).parent().parent().find("input[name='how-much']").fadeOut();
};
});
$(".quantity").blur(function(){
if ($(this).val() < 2){
$(this).val("1");
$(this).fadeOut()
};
});
$('.quantity').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
};
});
});
//]]>
Bedankt voor de hulp :)
Code (php)
1
var $input = $(this).parent().parent().find("input[name='how-much']");
Vervolgens kun je $input.val(), $input.val(quantity_new), $input.fadeOut() gebruiken in plaats van de uitgeschreven variant.