使用document.getElementsByClassName

时间:2015-10-02 22:38:54

标签: java html css wordpress woocommerce

我正在使用woocommerce和插件来满足德国市场的需求。 我使用一个实现交付时间的插件。 但只是在正常的黑色。我实际工作2个交货时间,1 - 3和5 - 10天。如果交货时间为1至3天,则应以绿色显示,如果交货时间为5 - 10天,我希望以橙色显示。

我已经将它显示为在静态页面上更改显示的颜色(没有颜色等变体的产品)。 完整的css类称为" wc-gzd-additional-info delivery-time-info"

我在页脚中添加了一些java:



<script type='text/javascript'>
var elementsa = document.getElementsByClassName("delivery-time-info")[0];
var elementsb = elementsa.innerHTML;
var elementsc = elementsa.innerHTML;
if (elementsb == "Lieferzeit: 1 - 3 Tage")
{ 
    elementsa.innerHTML = "<span style='color:green;font-weight:bold;'>"+elementsb+"</span>";
}
if (elementsc == "Lieferzeit: 5 - 10 Tage")
{ 
    elementsa.innerHTML = "<span style='color:orange;font-weight:bold;'>"+elementsc+"</span>";
}
</script>
&#13;
&#13;
&#13;

代码中的结果例如是:

&#13;
&#13;
<p class="wc-gzd-additional-info delivery-time-info"><span style="color:orange;font-weight:bold;">Lieferzeit: 5 - 10 Tage</span></p>
&#13;
&#13;
&#13;

但我的问题是对产品页面进行这些更改,例如颜色等变体。

问题是该行

&#13;
&#13;
<p class="wc-gzd-additional-info delivery-time-info">
&#13;
&#13;
&#13;

如果您没有选择颜色,则不会显示

。 在您做出决定之后,该行更改/将css类元素添加到:

&#13;
&#13;
<p class="wc-gzd-additional-info delivery-time-info variation_modified" style="display: block;">Lieferzeit: 1 - 3 Tage</p>
&#13;
&#13;
&#13;

我尝试过各种改变 document.getElementsByClassName(&#34;递送时间信息&#34) 至 document.getElementsByClassName(&#34; delivery-time-info&#34; +&#34;&#34; + variation_modified&#34;)

和其他变化。

但我认为问题是代码在页面加载后会发生变化吗?

任何提示如何制作?有什么样的重新扫描页面?

致以最诚挚的问候,非常感谢!

第一次回答后编辑,评论时间过长: 方法是帖子我认为,只是再次手动扫描代码,这就是变化按钮背后的内容......好像所有东西都已加载......

<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="658" data-product_variations="[{&quot;variation_id&quot;:662,&quot;variation_is_visible&quot;:true,&quot;variation_is_active&quot;:true,&quot;is_purchasable&quot;:true,&quot;display_price&quot;:37.37,&quot;display_regular_price&quot;:37.37,&quot;attributes&quot;:{&quot;attribute_farbe&quot;:&quot;Pink&quot;},&quot;image_src&quot;:&quot;&quot;,&quot;image_link&quot;:&quot;&quot;,&quot;image_title&quot;:&quot;&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;<span class=\&quot;price\&quot;><span class=\&quot;amount\&quot;>37,37&nbsp;€<\/span><\/span>&quot;,&quot;availability_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;440072&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;delivery_time&quot;:&quot;Lieferzeit: 1 - 3 Tage&quot;,&quot;unit_price&quot;:&quot;&quot;,&quot;product_units&quot;:&quot;&quot;,&quot;tax_info&quot;:&quot;inkl. 19% MwSt.&quot;},{&quot;variation_id&quot;:663,&quot;variation_is_visible&quot;:true,&quot;variation_is_active&quot;:true,&quot;is_purchasable&quot;:true,&quot;display_price&quot;:37.37,&quot;display_regular_price&quot;:37.37,&quot;attributes&quot;:{&quot;attribute_farbe&quot;:&quot;Gelb&quot;},&quot;image_src&quot;:&quot;&quot;,&quot;image_link&quot;:&quot;&quot;,&quot;image_title&quot;:&quot;&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;<span class=\&quot;price\&quot;><span class=\&quot;amount\&quot;>37,37&nbsp;€<\/span><\/span>&quot;,&quot;availability_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;440074&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;delivery_time&quot;:&quot;Lieferzeit: 1 - 3 Tage&quot;,&quot;unit_price&quot;:&quot;&quot;,&quot;product_units&quot;:&quot;&quot;,&quot;tax_info&quot;:&quot;inkl. 19% MwSt.&quot;},{&quot;variation_id&quot;:664,&quot;variation_is_visible&quot;:true,&quot;variation_is_active&quot;:true,&quot;is_purchasable&quot;:true,&quot;display_price&quot;:45.16,&quot;display_regular_price&quot;:45.16,&quot;attributes&quot;:{&quot;attribute_farbe&quot;:&quot;Blau&quot;},&quot;image_src&quot;:&quot;&quot;,&quot;image_link&quot;:&quot;&quot;,&quot;image_title&quot;:&quot;&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;<span class=\&quot;price\&quot;><span class=\&quot;amount\&quot;>45,16&nbsp;€<\/span><\/span>&quot;,&quot;availability_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;440073&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;delivery_time&quot;:&quot;Lieferzeit: 1 - 3 Tage&quot;,&quot;unit_price&quot;:&quot;&quot;,&quot;product_units&quot;:&quot;&quot;,&quot;tax_info&quot;:&quot;inkl. 19% MwSt.&quot;}]">

    <table class="variations" cellspacing="0">
    <tbody>
                        <tr>
                                    <td class="product_label"><label for="farbe">Farbe</label></td>
                <td class="product_value">
                <div class="select2-container kad-select select2-dropdown-open select2-container-active" id="s2id_farbe"><a href="javascript:void(0)" class="select2-choice" tabindex="-1">   <span class="select2-chosen" id="select2-chosen-2">Pink</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen2" class="select2-offscreen">Farbe</label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2" disabled=""></div><select id="farbe" class="kad-select select2-offscreen" name="attribute_farbe" data-attribute_name="attribute_farbe" title="Farbe" tabindex="-1"><option value="">Wählen Sie eine Ausführung</option><option value="Pink" class="attached enabled">Pink</option><option value="Gelb" class="attached enabled">Gelb</option><option value="Blau" class="attached enabled">Blau</option></select><a class="reset_variations" href="#" style="visibility: visible; display: inline;">Lösche Auswahl</a>                   </td>
                                </tr>
                </tbody>
</table>


<div class="single_variation_wrap_kad" style="display:block;">
    <div class="single_variation headerfont"><span class="price" style="display: none;"><span class="amount">37,37&nbsp;€</span></span></div>    <div class="variations_button" style="">
  <div class="quantity buttons_added"><input type="button" value="-" class="minus"><input type="number" step="1" name="quantity" value="1" title="Menge" class="input-text qty text" size="4" min="1"><input type="button" value="+" class="plus"></div>
  <button type="submit" class="kad_add_to_cart headerfont kad-btn kad-btn-primary single_add_to_cart_button">In den Warenkorb</button>
  <input type="hidden" name="add-to-cart" value="658">
  <input type="hidden" name="product_id" value="658">
  <input type="hidden" name="variation_id" class="variation_id" value="662">
</div>

</div>

这是一个.js文件,询问变体的特定产品信息:

&#13;
&#13;
/*!
 * Variations Plugin
 */
;(function ( $, window, document, undefined ) {

	$.fn.wc_gzd_variation_form = function () {

		$.fn.wc_gzd_variation_form.reset_variation = function() {

			if ( $('.type-product').find('.org_price').length > 0 ) {
				$( '.type-product .price.variation_modified:not(.price-unit)' ).html( $('.type-product').find('.org_price').html() ).removeClass('variation_modified').show();
			}
			if ( $('.type-product').find('.org_delivery_time').length > 0 ) {
				$( '.type-product .delivery-time-info' ).html( $('.type-product').find('.org_delivery_time').html() ).removeClass('variation_modified').show();
			}
			if ( $('.type-product').find('.org_unit_price').length > 0 ) {
				$( '.type-product .unit-price' ).html( $('.product').find('.org_unit_price').html() ).removeClass('variation_modified').show();
			}
			if ( $('.type-product').find('.org_tax_info').length > 0 ) {
				$( '.type-product .tax-info' ).html( $('.product').find('.org_tax_info').html() ).removeClass('variation_modified').show();
			}
			if ( $('.type-product').find('.org_product_units').length > 0 ) {
				$( '.type-product .product-units' ).html( $('.product').find('.org_product_units').html() ).removeClass('variation_modified').show();
			}
			$('.org_product_info').remove();
			$('.variation_modified').remove();
		}

		$form = this
		$wrapper = $form.parents( '.type-product' )

		.on( 'found_variation', function( event, variation ) {
			if ( ! $wrapper.find( '.price:first' ).hasClass( 'variation_modified' ) ) {
				$wrapper.append( '<div class="org_price org_product_info">' + $wrapper.find( '.price:not(.price-unit):first' ).html() + '</div>' );
				if ( $wrapper.find( '.delivery-time-info:first' ).length > 0 )
					$wrapper.append( '<div class="org_delivery_time org_product_info">' + $wrapper.find( '.delivery-time-info:first' ).html() + '</div>' );
				if ( $wrapper.find( '.tax-info:first' ).length > 0 )
					$wrapper.append( '<div class="org_tax_info org_product_info">' + $wrapper.find( '.tax-info:first' ).html() + '</div>' );
				if ( $wrapper.find( '.price-unit:first' ).length > 0 )
					$wrapper.append( '<div class="org_unit_price org_product_info">' + $wrapper.find( '.price-unit:first' ).html() + '</div>' );
				if ( $wrapper.find( '.product-units:first' ).length > 0 )
					$wrapper.append( '<div class="org_product_units org_product_info">' + $wrapper.find( '.product-units:first' ).html() + '</div>' );
				$( '.org_product_info' ).hide();
			}
			if ( variation.price_html != '' ) {
				$( '.single_variation .price' ).hide();
				$wrapper.find( '.price:not(.price-unit):first' ).html( variation.price_html ).addClass( 'variation_modified' );
			}
			$wrapper.find( '.delivery-time-info:first' ).hide();
			$wrapper.find( '.price-unit:first' ).hide();
			$wrapper.find( '.tax-info:first' ).hide();
			$wrapper.find( '.product-units:first' ).hide();

			if ( variation.delivery_time != '' )
				$wrapper.find( 'p.delivery-time-info:first' ).html( variation.delivery_time ).addClass('variation_modified').show();
			if ( variation.tax_info != '' )
				$wrapper.find( '.tax-info:first' ).html( variation.tax_info ).addClass('variation_modified').show();
			if ( variation.unit_price != '' ) {
				$wrapper.find( '.price-unit:first' ).remove();
				$wrapper.find( 'div[itemprop="offers"]:first' ).after('<p class="price price-unit smaller variation_modified">' + variation.unit_price + '</p>').show();
			}
			if ( variation.product_units != '' ) {
				$wrapper.find( '.product-units:first' ).remove();
				$wrapper.find( '.product_meta' ).prepend('<span class="product-units-wrapper product-units variation_modified">' + variation.product_units + '</span>').show();
			}
		})

		// Check variations
		.on( 'update_variation_values', function( event, matching_variations ) {
			setTimeout(function() {
       		 	if ( ! $('.single_variation_wrap').is(':visible') ) {
       		 		$.fn.wc_gzd_variation_form.reset_variation();
       		 	}
       		 }, 250);	
		})

		.on( 'click', '.reset_variations', function( event ) {
			$.fn.wc_gzd_variation_form.reset_variation();
		});

	};

	$( function() {

		// wc_add_to_cart_variation_params is required to continue, ensure the object exists
		if ( typeof wc_add_to_cart_variation_params === 'undefined' )
			return false;
		$( '.variations_form' ).wc_gzd_variation_form();
		$( '.variations_form .variations select' ).change();
		$( '.variations_form .variations input:radio:checked' ).change();
	});

})( jQuery, window, document );
&#13;
&#13;
&#13;

我实际上不能编辑变体,因为我在上面尝试的方法必须在每次&#34;选择变体后重新扫描&#34;。

1 个答案:

答案 0 :(得分:0)

[解决]

好的,这样更容易......

只需转到wp_terms查找右侧行并将名称从“1 - 3 Tage”更改为

<span style='color:green;font-weight:bold;'>1 - 3 Tage</span>

我试图在wp后端输入它,没有用。

但是通过phpmyadmin输入它。

感谢大家和最诚挚的问候!