jQuery (this) + string

[JaPPa03]

De bedoeling is dit: Wanneer je op de div met class 'item-1-wrap' klikt dat een andere div met class 'item-1' zichtbaar wordt. Dit moet voor meerdere items gebeuren vandaar de nummering.

Ik loop tegen het probleem op dat ik dus de string "-wrap" wil toevoegen aan this. Ik heb al een aantal opties geprobeerd waaronder een variabele maken maar geen succes gehad. Ik ben redelijk nieuw met jQuery en vraag me af of ik het this commando wel goed begrijp.

JavaScript:

$.fn.demo = function(element) {
 return this.each(function() {
   $(this+"-wrap").click(function() {
     $(this).removeClass('no-display');
   });
});
}

$('.item-1').demo();

Heeft iemand een oplossing of een richting waarin ik het moet zoeken voor wat ik probeer te doen?

[418O2]

this is geen commando, this is de scope van je huidige functie. Daar kan je niet zomaar een string aan toevoegen.

Kan je je html structuur ook posten? Of beter nog, even op JSFiddle zetten

[CurlyMo]

Je zult eerst de class op moeten zoeken bij this om daar vervolgens je string aan vast te plakken

JavaScript:

$(this).attr('class')+"-wrap";

Aanvullend. Ik zie dat je ergens de class no-display toevoegd (en die hier weer verwijderd). Dus als je bovenstaande code draait, dan zou je uiteindelijke samenvoeging ook dit kunnen worden:

code:

item-1 no-display-wrap

Je zult dus eerst de juiste subclass moeten extraheren om daar vervolgens je -wrap aan vast te plakken.

Oftewel, ben je bewust dat een element meerdere classes kan bevatten.

[ Voor 60% gewijzigd door CurlyMo op 21-02-2018 18:13 ]

[JaPPa03]

Ik heb nu dit, het is wat minder fancy maar werkt prima.

JavaScript:

 $.fn.demo = function(element) {
  return this.each(function() {
      $(this).removeClass('no-display');
 });
}

$('.item-1-wrap').click(function() {
   $('.item-1').demo();
});

Uiteindelijk zal de functie meer bevatten om classes toe te voegen voor animate.css vandaar de behoefte voor een functie.

[Rekcor]

JaPPa03 schreef op woensdag 21 februari 2018 @ 18:15:
Ik heb nu dit, het is wat minder fancy maar werkt prima.

JavaScript:

 $.fn.demo = function(element) {
  return this.each(function() {
      $(this).removeClass('no-display');
 });
}

$('.item-1-wrap').click(function() {
   $('.item-1').demo();
});

Uiteindelijk zal de functie meer bevatten om classes toe te voegen voor animate.css vandaar de behoefte voor een functie.

Het is niet echt handig om de $.fn-namespace te gebruiken voor dit soort eenvoudige functies. Grote kans dat je in de toekomst er tegenaan gaat lopen dat bijv. een andere plugin ook 'demo' wil gebruiken en dat jouw functie overschreven wordt.

In lijn met @CurlyMo, zou ik doen:

JavaScript:

$('.item-1-wrap').click(function() {
   var className = $(this).attr('class').replace(/-wrap/, '');
   $('.'+className ).removeClass('no-display');
});