Probleem met het selecteren van een afbeelding

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jorn Reed

Jorn Reed

30/12/2018 18:42:40
Quote Anchor link
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:
$('.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");
});
 
PHP hulp

PHP hulp

28/03/2024 15:24:50
 
Ozzie PHP

Ozzie PHP

30/12/2018 22:09:09
Quote Anchor link
>> Maar gek genoeg pakt hij alle afbeeldingen van de pagina.

Nou, zo heel gek is dat niet.

const el = $(".photo-size");

Daarmee pak je alle elementen met de class "photo-size".
 
Thomas van den Heuvel

Thomas van den Heuvel

30/12/2018 22:11:52
Quote Anchor link
Maar dat is precies wat je doet, met $('img') -de 5e regel van het bovenstaande codefragment- selecteer je *alle* afbeeldingen.

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

Jorn Reed

02/01/2019 00:29:00
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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");
});
 
- Ariën  -
Beheerder

- Ariën -

02/01/2019 00:33:41
Quote Anchor link
Zelfde bericht uit de startpost :-P?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.