Pergunta

I'm currently trying to change multiple element's values.

However, my script only work using the element ID, and I can't have more than one ID. What is the alternative, since I don't know how to use getElementsByClassName..

HTML:

<select name="valores" id="valores" class="valores" onchange="trocaValores(this.value)">
<option value="v01" selected="selected">Mensal</option>
<option value="v02">Trimestral 5% de desconto</option>
<option value="v03">Semestral 10% de desconto</option>
<option value="v04">Anual 15% de desconto</option>
</select>

jScript:

function trocaValores(obj) {

combo2=document.getElementById('valores');

for (x=0;x<combo2.length;x++){
    linha=combo2.options[x].value;
    document.getElementById(linha).style.display = "none";
}
//document.getElementById("000").style.display = "none";
//document.pesquisa.cidades.value
itemcombo=combo2.options[combo2.selectedIndex].value;
obj2=document.getElementById(itemcombo);
if (obj2){
    obj2.style.display = '';
}

};

And this is what I need to change:

<span class="moeda soft-strong" id="v01"><sup><h4>R$ 16.90</h4> </sup> mensais </span>
<span class="moeda soft-strong" id="v02" style="display:none"><sup><h4>R$ 16.90</h4> </sup> trimestral </span>
<span class="moeda soft-strong" id="v03" style="display:none"><sup><h4>R$ 16.90</h4> </sup> semestral </span>
<span class="moeda soft-strong" id="v04" style="display:none"><sup><h4>R$ 16.90</h4> </sup> anual </span>

PS: I have three blocks like that, so I have three v01, v02..

Thanks!

@EDIT:

Example:

Product ONE:

<span class="moeda soft-strong" id="v01"><sup><h4>R$ 16.90</h4> </sup> mensais </span>
<span class="moeda soft-strong" id="v02" style="display:none"><sup><h4>R$ 16.90</h4> </sup> trimestral </span>
<span class="moeda soft-strong" id="v03" style="display:none"><sup><h4>R$ 16.90</h4> </sup> semestral </span>
<span class="moeda soft-strong" id="v04" style="display:none"><sup><h4>R$ 16.90</h4> </sup> anual </span>

Product TWO:

<span class="moeda soft-strong" id="v01"><sup><h4>R$ 16.90</h4> </sup> mensais </span>
<span class="moeda soft-strong" id="v02" style="display:none"><sup><h4>R$ 16.90</h4> </sup> trimestral </span>

[...]

When changing pricing to product ONE, I need that the monthly price (translation: mensais) of the product TWO change, when changing the quaterly (translation: trimenstral), change of the two products.... and so on!

Foi útil?

Solução

Are you using jQuery or pure javascript? Because if you are using jQuery you could use jQuery selectors to search the DOM and find the elements.

$('#valores').change(function() {
    $('span[class^="moeda"]').hide();

    //$(this) would be the combo box and .val() will 
    //give you the value of the selected item
    $('#' + $(this).val()).show();
});

This is all you'd need to do if you used jQuery.

http://jsfiddle.net/dklingman/S8X6k/

@Update

$('#valores').change(function () {
    //Get and hold onto all the spans.  
    //This helps with not needing to search 
    //the DOM each time, one and done
    var spans = $('div[id^="product"] span');

    $(spans).hide();

    //$(this) would be the combo box and .val() will 
    //give you the value of the selected item.
    //Now all we need to do is search, (filter), the
    //set of stored spans for the ones that have an
    //id that starts with the selected value from the
    //combo box.
    $(spans).filter('[id^="' + $(this).val() + '"]').show();
});

http://jsfiddle.net/dklingman/UBEm2/4/

Outras dicas

getElementsByClassName is like getElementById.

 var x=document.getElementById("the_id") //getElementById method

 var y=document.getElementsByClassName("the_class") //getElementsByClassName method

You type the class name in just like you'd type the id in.

---Edit:---

document.getElementsByClassName returns an array-like object.

So do something like this:

 var first=document.getElementsByClassName("the_class");

 document.write(first[0]);

*Use document.write for testing purposes only.


Now if you wanted the price to change at the beginning of your script make a variable: var price="R$ 16.90";

Then to change the price do: price*0.95 //5% discount price*0.90 //10% discount price*0.85 //15% discount

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top