使用jQuery更改多个元素

Question

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!

Answer 1

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

Answer 2

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/