jquery - 如果 Element 有 Class 添加到 Content 中，否则隐藏它

Question

不幸的是，我根本不是 JQuery 方面的专家，如果我的代码完全错误且过于复杂，我深表歉意。我尝试尽可能详细地解释我的问题。

我有一个具有两个属性的产品:尺寸 (Größe wählen) 和框架 (Rahmen wählen)。

如果类与变体匹配，我想为图像下的第二个属性“Rahmenwählen”插入一个 DIV。

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>' );
});

它也适用于此变体。但是，如果没有选择第一个属性“Größe wählen”的变体，我想隐藏第二个属性“Rahmen wählen”。

Displayed like this

这是我“尝试”的结果。我希望我生动地解释了我的问题，并再次为我提供的错误方法道歉。

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');
  }

});

这是第一个属性“Size”的 HTML 代码

<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>
...

这是第一个属性“Rahmen wählen”的 HTML 代码

<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>
...

Answer 1

检查这个

$(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');
  }

});