Zmena CSS class v .tpl pomocou JavaScriptu

Programovacie jazyky, rady, poradňa...
Napísať odpoveď
mesiiiny
Novice
Novice
Príspevky: 3
Registrovaný: 02 júl 2015, 13:56

Zmena CSS class v .tpl pomocou JavaScriptu

Príspevok od používateľa mesiiiny »

Ahojte,

potrebujem poradit ohladom zmeny CSS classy v .tpl subore pomocou JavaScriptu.

Tu je ukazka casti kodu, tak ako ho zobrazuje prehliadac:

Kód: Vybrať všetko

<div id="awp_cell_cont_1965" class="awp_cell_cont awp_cell_cont_167 awp-blok-varianta" style="width: 135px;">
    <div id="awp_cell_1965" style="" onclick="$('#awp_radio_group_1965').attr('checked','checked');try{$.uniform.update('.awp_cell_cont_167, input[type=\'radio\']');}catch(err){};awp_select('167',1965, 1, false)">
        <div id="awp_tc_1965" class="awp_group_image awp_gi_167 awp-blok-varianta-obrazok" style="width:118px;height:174px;">
            <a href="http://www.stranka.eu/img/co/1965.jpg" border="0" class="fancybox shown awp-blok-varianta-lupa"></a>
            <img style="width:118px;height:174px;" src="http://www.stranka.eu/img/co/1965.jpg" alt="„80N“" title="„80N“">
        </div>
        <div id="awp_radio_cell1965" class="awp_rrca">
            <div class="radio" id="uniform-awp_radio_group_1965">
                <span class="checked">
                    <input type="radio" class="awp_attribute_selected awp_clean" id="awp_radio_group_1965" name="awp_group_167" value="1965" checked="checked">
                </span>
            </div>&nbsp;
        </div>
        <div id="awp_impact_cell1965" class="awp_nica">
            <div class="awp_tbca awp-blok-varianta-nazov">
                „80N“
            </div>
            <div class="awp_tbca" id="price_change">&nbsp;
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {awp_center_images(167);});
        </script>
    </div>
</div>
Ked je radiobutton v stave "checked" (oznaceny), zmeni sa mi classa v <span>, ktory je hned nad inputom na class="checked", ukazka:

Kód: Vybrať všetko

<span class="checked">
                    <input type="radio" class="awp_attribute_selected awp_clean" id="awp_radio_group_1965" name="awp_group_167" value="1965" checked="checked">
                </span>
Ked bude radiobutton v stave "checked" (oznaceny) potrebujem, aby nastala zmena aj v tomto riadku:

Kód: Vybrať všetko

<div id="awp_cell_cont_1965" class="awp_cell_cont awp_cell_cont_167 awp-blok-varianta" style="width: 135px;">
Potrebujem aby za classu awp-blok-varianta pribudla dalsia classa, napr. box-selected, ukazka:

Kód: Vybrať všetko

<div id="awp_cell_cont_1965" class="awp_cell_cont awp_cell_cont_167 awp-blok-varianta box-selected" style="width: 135px;">
Potrebujem, aby mi to menil JavaScript, ktory si pridam ku ostatnym JavaScriptom, ktore sa mi nacitavaju pri template, ktora generuje hore uvedene kody.

Poprosim vas o radu :)


Tu je ukazka casti kodu v .tpl subore:

Kód: Vybrať všetko

<div id="awp_cell_cont_{$id_attribute}" class="awp_cell_cont awp_cell_cont_{$group.id_group}{if $smarty.foreach.awp_loop.iteration % $group.group_per_row == 1 || $group.group_per_row == 1} awp_clear{/if} awp-blok-varianta">
								<div id="awp_cell_{$id_attribute}" {if $group.attributes_quantity.$id_attribute == 0 && $awp_allow_oosp != 1 && $awp_out_of_stock == 'hide'}class="awp_oos"{/if} style="{if $group.group_color != 1}{if isset($group.group_width)}width:{$group.group_width}px;{/if}{if isset($group.group_height)}height:{$group.group_height}px;{/if}{/if}" {if $group.attributes_quantity.$id_attribute > 0 || $awp_out_of_stock != 'disable' || $awp_allow_oosp == 1}onclick="$('#awp_radio_group_{$id_attribute}').attr('checked','checked');{if $group.group_type == "image"}awp_toggle_img({$group.id_group|intval},{$group_attribute.0|intval});{/if}try{'{'}$.uniform.update('.awp_cell_cont_{$group.id_group|intval}, input[type=\'radio\']');}catch(err){};awp_select('{$group.id_group|intval}',{$group_attribute.0|intval}, {$awp_currency.id_currency}, false){/if}">
	                   				{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
                   						<div id="awp_tc_{$id_attribute}" class="awp_group_image awp_gi_{$group.id_group}{if !$group.group_layout} awp_left{/if}{if $group.group_type == "image"}{if $id_attribute|in_array:$group.default} awp_image_sel{else} awp_image_nosel{/if}{/if} awp-blok-varianta-obrazok" style="{if isset($group.group_width)}width:{$group.group_width}px;{/if}{if isset($group.group_height)}height:{$group.group_height}px;{/if}">
		                    				{if $group.group_type != "image" && !$awp_popup}<a href="{$img_col_dir}{$id_attribute}.jpg" border="0" class="{if $awp_psv < 1.6}thickbox{else}fancybox shown awp-blok-varianta-lupa{/if}">{/if}{if $group.group_type != "image" && !$awp_popup}</a>{/if}<img {if $group.group_resize}style="{if isset($group.group_width)}width:{$group.group_width}px;{/if}{if isset($group.group_height)}height:{$group.group_height}px;{/if}"{/if} src="{$img_col_dir}{$id_attribute}.jpg" alt="{$group_attribute.1|escape:'htmlall':'UTF-8'}" title="{$group_attribute.1|escape:'htmlall':'UTF-8'}" />
                   						</div>
                   					{elseif $group_attribute.2 != ""}
	                   					<div id="awp_tc_{$id_attribute}" class="awp_group_image awp_gi_{$group.id_group}{if !$group.group_layout} awp_left{/if}{if $group.group_type == "image"}{if $id_attribute|in_array:$group.default} awp_image_sel{else} awp_image_nosel{/if}{/if}" style="{if isset($group.group_width)}width:{$group.group_width}px;{/if}{if isset($group.group_height)}height:{$group.group_height}px;{/if}background-color:{$group_attribute.2};">
                   							&nbsp;
	                   					</div>
                   					{/if}
                   					<div id="awp_radio_cell{$id_attribute}" class="{if !$group.group_layout}awp_rrla{else}awp_rrca{/if}{if $group.group_type == "image"} awp_none{/if}">
	                   					<input type="radio" {if $group.attributes_quantity.$id_attribute == 0 && $awp_allow_oosp != 1  && $awp_out_of_stock == 'disable' && $awp_allow_oosp == false}disabled="disabled"{/if} class="awp_attribute_selected awp_clean" id="awp_radio_group_{$id_attribute}" name="awp_group_{$group.id_group}" value="{$group_attribute.0|intval}" {if $id_attribute|in_array:$group.default}checked="checked"{/if} />&nbsp;
                                        {if $smarty.foreach.awp_loop.first}
                 								<input type="hidden" name="pi_default_{$group.id_group}" id="pi_default_{$group.id_group}" value="{$default_impact}" />
               							{/if}
               						</div>
               						<div id="awp_impact_cell{$id_attribute}" class="{if !$group.group_layout}awp_nila{else}awp_nica{/if}">
										{if isset($group.group_hide_name) && !$group.group_hide_name}
											<div class="{if !$group.group_layout}awp_tbla{else}awp_tbca{/if} awp-blok-varianta-nazov">{$group_attribute.1|escape:'htmlall':'UTF-8'}</div>
										{/if}
                   						{foreach from=$attributeImpacts key=id_attributeImpact item=attributeImpact}
	                   						{if $id_attribute == $attributeImpact.id_attribute}
												{math equation="x - y" x=$attributeImpact.price y=$default_impact assign='awp_pi'}
           										<div class="{if !$group.group_layout}awp_tbla{else}awp_tbca{/if}" id="price_change">
                   								{if $awp_pi_display == ""}
	                   								&nbsp;
               									{elseif $awp_pi > 0}
	                   								<span class="awp-blok-varianta-doplatok">Doplatok:</span> <span class="awp-blok-varianta-cena">{convertPriceWithCurrency price=$awp_pi currency=$awp_currency}</span>
			                   					{elseif $awp_pi < 0}
	                   								[{l s='Subtract' mod='attributewizardpro'} {convertPrice price=$awp_pi|abs}]
                   								{else}
	    	           								&nbsp;
	              								{/if}
                  								</div>
	                   						{/if}
    	              					{/foreach}
                   					</div>
               						<script type="text/javascript">
               						$(document).ready(function() {ldelim}
	       							awp_center_images({$group.id_group});
               						{rdelim});
               						{if !$group.group_layout && $group.group_height}
	                   					$("#awp_radio_cell{$id_attribute}").css('margin-top',({$group.group_height}/2) - 8);
                   						$("#awp_impact_cell{$id_attribute}").css('margin-top',({$group.group_height}/2) - 8);
              						{/if}
	               					</script>
                  				</div>
                  			</div>
Hore
audiotrack
VIP
VIP
Používateľov profilový obrázok
Príspevky: 25958
Registrovaný: 09 sep 2005, 18:39
Kontaktovať používateľa:
Kontaktné informácie používateľa - audiotrack

Re: Zmena CSS class v .tpl pomocou JavaScriptu

Príspevok od používateľa audiotrack »

to je neskutočný bordel, a nie template.
neviem načo tam tú classu potrebuješ, ale ak na nejaké štýlovanie, radšej by som napísal selector v css ako pridávať čo i len jeden znak do tohto bordelu. Prípadne všetko javascript napísať do samostatného súboru, a nie miešať to s html
Hore
Napísať odpoveď

Návrat na "Programovanie"