所以我希望图像出现后，我点击按钮。
HTML
<button class="knife-button" onclick="bayonetFunction()">Click to see more</button>
<div class="column1">
<img src="" class="bayonet" alt="">
</div>
<div class="column1">
<img src="" class="bayonet" alt="">
</div>
还有更多的图像。
CSS
.bayonet {
display: none;
}
JS
function bayonetFunction(){
document.getElementsByClassName('bayonet').style.display="inline";
}
这不起作用。
您必须遍历所有元素。 请参阅此代码示例:
null
function bayonetFunction(){
document.querySelectorAll('.bayonet').forEach(function(el) {
el.style.display = 'block';
});
}.bayonet {
display: none;
width: 100px;
height: 100px;
background: teal;
}<button class="knife-button" onclick="bayonetFunction()">Click to see more</button>
<div class="column1">
<img src="" class="bayonet" alt="">
</div>
<div class="column1">
<img src="" class="bayonet" alt="">
</div>
null
function bayonetFunction(){
[].forEach.call(document.querySelectorAll('.bayonet'), function(d) {
d.style.display ="inline";
});
}.bayonet {
display: none;
}<button class="knife-button" onclick="bayonetFunction()">Click to see more</button>
<div class="column1">
<img src="https://www.gravatar.com/avatar/3ad45b8fc3a096c8d840bcedb819bfb8?s=32&d=identicon&r=PG&f=1" class="bayonet" alt="">
</div>
<div class="column1">
<img src="https://www.gravatar.com/avatar/3ad45b8fc3a096c8d840bcedb819bfb8?s=32&d=identicon&r=PG&f=1" class="bayonet" alt="">
</div>