К сожалению, я совсем не эксперт в JQuery и очень извиняюсь, если мой код совершенно неправильный и слишком сложный. Я пытаюсь объяснить мою проблему как можно более подробно.
У меня есть продукт с двумя атрибутами: размер (Größe wählen) и рамка (Rahmen wählen).
Я хочу вставить DIV для2-й атрибут "Rahmen wählen" под изображением, если класс соответствует варианту.
Изображение веб-сайта внешнего интерфейса
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>' );
});
Это также работало с этим вариантом. Однако, если не выбран вариант 1-го атрибута "Größe wählen", я хочу скрыть 2-й атрибут "Rahmen wählen".
Отображается так
Вот мой «попытанный» результат. Я надеюсь, что я объяснил свою проблему живо и извиняюсь снова за плохой подход, который я поставил.
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');
}
});
Вот код 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>
...
Вот код HTML для первого атрибута "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>
...