CODEWITHSUNDEEP
jqueryhtml
Mindsetboosting
Mindsetboosting

Reputation: 21

If Element has Class add inside Content, else hide it

Unfortunately I'm not an expert at JQuery at all and apologize a lot if my code is completely wrong and too complex. I try to explain my problem as detailed as possible.

I have a product with two attributes: size (Größe wählen) and frame (Rahmen wählen).

I want to insert a DIV for the 2nd attribute "Rahmen wählen" under the image if the class matches the variant.

Frontend Website Image

jQuery(document).ready(function( $ ){

    $('.swatch-kein-rahmen .swatch-inner img').after( '<span class="rahmen-info">Kein Rahmen<p class="rahmen-info-price">(0,00 €)</p></span>' );
});

It also worked with this variant. However, if no variant of the 1st attribute "Größe wählen" is selected, I want to hide the 2nd attribute "Rahmen wählen".

Displayed like this

Here is my "attempted" result. I hope I explained my problem vividly and apologize again for the bad approach I delivered. 

jQuery(document).ready(function( $ ){

    $('.swatch-kein-rahmen .swatch-inner img').after( '<span class="rahmen-info">Kein Rahmen<p class="rahmen-info-price">(0,00 €)</p></span>' );

  if($('.swatch-18x24cm').hasClass('selected')) {

    $('.swatch-schwarz-18x24 .swatch-inner img').after( '<span class="rahmen-info">Schwarzer Rahmen<p class="rahmen-info-price">(17,00 €)</p></span>' );
    $('.swatch-silber-18x24 .swatch-inner img').after( '<span class="rahmen-info">Silberner Rahmen<p class="rahmen-info-price">(17,00 €)</p></span>' );
    $('.swatch-weiss-18x24 .swatch-inner img').after( '<span class="rahmen-info">Weißer Rahmen<p class="rahmen-info-price">(17,00 €)</p></span>' );

  } else if($('.swatch-20x30cm').hasClass('selected')) {

    $('.swatch-schwarz-20x30 .swatch-inner img').after( '<span class="rahmen-info">Schwarzer Rahmen<p class="rahmen-info-price">(19,00 €)</p></span>' );
    $('.swatch-silber-20x30 .swatch-inner img').after( '<span class="rahmen-info">Silberner Rahmen<p class="rahmen-info-price">(19,00 €)</p></span>' );
    $('.swatch-weiss-20x30 .swatch-inner img').after( '<span class="rahmen-info">Weißer Rahmen<p class="rahmen-info-price">(19,00 €)</p></span>' );

  } else {
    $('.xt_woovs-swatches').addClass('hide');
  }

});

Here is the HTML code for the first attribute "Size"

<ul class="xt_woovs-swatches" data-attribute_name="attribute_pa_groesse">
  <li class="swatch swatch-label swatch-18x24cm selected xt_woovs-square" title="18x24cm" data-value="18x24cm" data-tooltip_type="disabled" data-tooltip_value="">
     <span class="swatch-inner swatch-label-inner">18x24cm</span>
  </li>
...

Here is the HTML code for the first attribute "Rahmen wählen"

<ul class="xt_woovs-swatches" data-attribute_name="attribute_pa_rahmen">
  <li class="swatch swatch-image swatch-kein-rahmen selected xt_woovs-round_corner xt_woovs-selected" title="Kein Rahmen" data-value="kein-rahmen" data-tooltip_type="disabled" data-tooltip_value="">
     <span class="swatch-inner swatch-image-inner">
        <img src="https://shop.mindsetboosting.com/de/wp-content/uploads/sites/2/2019/09/noframe-150x150.jpg" alt="Kein Rahmen">
     </span>
  </li>
...

Upvotes: 2

Views: 90

Answers (1)

Jinesh
Jinesh

Reputation: 1580

Check this one

$(document).ready(function(){

    $('.swatch-kein-rahmen .swatch-inner img').after( '<span class="rahmen-info">Kein Rahmen<p class="rahmen-info-price">(0,00 €)</p></span>' );

  if($('.swatch-18x24cm').hasClass('selected')) {

    $('.swatch-schwarz-18x24 .swatch-inner img').after( '<span class="rahmen-info">Schwarzer Rahmen<p class="rahmen-info-price">(17,00 €)</p></span>' );
    $('.swatch-silber-18x24 .swatch-inner img').after( '<span class="rahmen-info">Silberner Rahmen<p class="rahmen-info-price">(17,00 €)</p></span>' );
    $('.swatch-weiss-18x24 .swatch-inner img').after( '<span class="rahmen-info">Weißer Rahmen<p class="rahmen-info-price">(17,00 €)</p></span>' );

  } else if($('.swatch-20x30cm').hasClass('selected')) {

    $('.swatch-schwarz-20x30 .swatch-inner img').after( '<span class="rahmen-info">Schwarzer Rahmen<p class="rahmen-info-price">(19,00 €)</p></span>' );
    $('.swatch-silber-20x30 .swatch-inner img').after( '<span class="rahmen-info">Silberner Rahmen<p class="rahmen-info-price">(19,00 €)</p></span>' );
    $('.swatch-weiss-20x30 .swatch-inner img').after( '<span class="rahmen-info">Weißer Rahmen<p class="rahmen-info-price">(19,00 €)</p></span>' );

  } else {
    $('.xt_woovs-swatches').addClass('hide');
  }

});

Upvotes: 2

Related Questions