Question

我目前正在尝试更改多个元素的值。

但是，我的脚本只能使用元素ID，而且我不能有多个ID。有什么替代方案，因为我不知道如何使用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 = '';
}

};

这就是我需要改变的地方：

<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：我有三个这样的块，所以我有三个v01，v02 ..

谢谢！

@EDIT：

示例：

产品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>

产品二：

<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>

[...]

当将产品定价更改为产品时，我需要更改产品TWO的月度价格（翻译：mensais），更改四季（翻译：trimenstral），更改两个产品......等等！

Answer 1

getElementsByClassName与getElementById类似。

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

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

您输入的是类名，就像您输入ID一样。

---编辑：---

document.getElementsByClassName返回一个类似数组的对象。

所以做这样的事情：

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

 document.write(first[0]);

*使用document.write仅用于测试目的。

现在，如果您希望在脚本开头更改价格，请创建一个变量： var price="R$ 16.90";

然后改变价格做： price*0.95 //5% discount price*0.90 //10% discount price*0.85 //15% discount

Answer 2

您使用的是jQuery还是纯javascript？因为如果你使用jQuery，你可以使用jQuery选择器来搜索DOM并找到元素。

$('#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();
});

如果你使用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/

使用jQuery更改多个元素

2 个答案: