使用Javascript更改没有id的DOM元素的css

我有一个显示的

和几个隐藏在里面的

<div class="em-booking-form-details">
<p class="ticket-price">
.........
.........
</div>

---

我有一个id=寄存器的按钮寄存器。单击此按钮时，我希望显示所有的

s。并不是说我不能为

和
使用id，只能使用javascript。
文档。querySelectorAll（'.em booking form details p'）

将返回与该CSS选择器匹配的DOM节点列表。您可以迭代该列表并将
display
属性设置为
block
或任何您需要的
document.queryselectoral（'.em booking form details p'）

将返回与该CSS选择器匹配的DOM节点列表。您可以迭代该列表，并将
display
属性设置为
block
或您需要的任何内容
我在JSFIDLE上提供了一个解决方案

var dom_elements=document.queryselectoral（'.em booking form details p'）；
var dom_length=dom_elements.length；
log（dom_元素）；
对于（var i=0；i
我在JSFIDLE上提供了一个解决方案

var dom_elements=document.queryselectoral（'.em booking form details p'）；
var dom_length=dom_elements.length；
log（dom_元素）；
对于（var i=0；i
var div=document.getElementsByClassName（“em预订表单详细信息”）
var p=div[0]。getElementsByTagName（'p'）
对于（var i=0；i
var div=document.getElementsByClassName（“em预订表单详细信息”）
var p=div[0]。getElementsByTagName（'p'）
对于（var i=0；i您是否可以使用jQuery？如果可以，那么$（文档）。在（'click'，'#register'，function（）{$（“.ticket price”）.show（）上；他不需要jQuery，但您是否可以使用jQuery？如果可以，那么$（文档）。在（'click'，'#register'，function（）{$（“.ticket price”）.show（）），他不需要jQuery
.em-booking-form-details p{
    display:none;
}

var dom_elements = document.querySelectorAll('.em-booking-form-details p');
var dom_length = dom_elements.length;

console.log(dom_elements);
for(var i = 0 ; i < dom_length ; i++) {
    dom_elements[i].style.display = 'block';
}

    var div = document.getElementsByClassName("em-booking-form-details")
    var p = div[0].getElementsByTagName('p')
    for(var i=0;i<p.length;i++){
            p[i].style.display = "block";       
    }   





    var p = document.getElementsByClassName('ticket-price')
    var all = p[0].parentElement.children
    for(var i=0;i<all.length;i++){
            all[i].style.display = "block";     
    }