Probleem met het selecteren van een afbeelding
Nu loop ik tegen een paar problemen aan. Omdat de gebruiker zelf afbeeldingen kan uploaden, gebruikt ik $('img') zodat elke afbeelding kan gebruikt worden met die functionaliteit. Ook gebruik ik $(this) zodat alleen de specifiek geklikte afbeelding word uitvergroot. Maar gek genoeg pakt hij alle afbeeldingen van de pagina. Haalt ze van de pagina af en plakt het allemaal in de div die word aangemaakt met de verdwenen afbeeldingen.
Ook doet de close optie het niet die ik op een <a> heb toegepast.
Hier is het Jquery script:
$('.content-block img').click(function () {
const el = $(".photo-size");
el.css("display", "block");
var src = $(this).attr('src');
$('img').appendTo(el).attr('src', src).addClass('highlighted-img');
});
$('.close').click(function (ev) {
ev.preventDefault();
$(".photo-size").css("display", "none");
});
Nou, zo heel gek is dat niet.
const el = $(".photo-size");
Daarmee pak je alle elementen met de class "photo-size".
Zet bij voorkeur om alle codefragmenten [code][/code] tags, dit verbetert de leesbaarheid en maakt het makkelijker om specifieke regels aan te wijzen.
EDIT, en wat @Ozzie zei dus, jouw selectors zijn te algemeen.
Gewijzigd op 30/12/2018 22:12:29 door Thomas van den Heuvel
Jorn Reed op 30/12/2018 18:42:40:
Ik heb een script geschreven dat afbeeldingen laat vergroten wanneer je er op klikt.
Nu loop ik tegen een paar problemen aan. Omdat de gebruiker zelf afbeeldingen kan uploaden, gebruikt ik $('img') zodat elke afbeelding kan gebruikt worden met die functionaliteit. Ook gebruik ik $(this) zodat alleen de specifiek geklikte afbeelding word uitvergroot. Maar gek genoeg pakt hij alle afbeeldingen van de pagina. Haalt ze van de pagina af en plakt het allemaal in de div die word aangemaakt met de verdwenen afbeeldingen.
Ook doet de close optie het niet die ik op een <a> heb toegepast.
Hier is het Jquery script:
Nu loop ik tegen een paar problemen aan. Omdat de gebruiker zelf afbeeldingen kan uploaden, gebruikt ik $('img') zodat elke afbeelding kan gebruikt worden met die functionaliteit. Ook gebruik ik $(this) zodat alleen de specifiek geklikte afbeelding word uitvergroot. Maar gek genoeg pakt hij alle afbeeldingen van de pagina. Haalt ze van de pagina af en plakt het allemaal in de div die word aangemaakt met de verdwenen afbeeldingen.
Ook doet de close optie het niet die ik op een <a> heb toegepast.
Hier is het Jquery script:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$('.content-block img').click(function () {
const el = $(".photo-size");
el.css("display", "block");
var src = $(this).attr('src');
$('img').appendTo(el).attr('src', src).addClass('highlighted-img');
});
$('.close').click(function (ev) {
ev.preventDefault();
$(".photo-size").css("display", "none");
});
const el = $(".photo-size");
el.css("display", "block");
var src = $(this).attr('src');
$('img').appendTo(el).attr('src', src).addClass('highlighted-img');
});
$('.close').click(function (ev) {
ev.preventDefault();
$(".photo-size").css("display", "none");
});
