在PHP文件中实现javascript时显示/隐藏功能不起作用

Question

所以，在javascript和PHP方面，我完全是新手，但我正在稳步学习。不过，我需要向你们寻求一些帮助。我尝试编写一段javascript，当单击某个按钮时，它会显示和隐藏带有文本的div。

我想要实现的目标如下：

单击按钮 A 时，其下方会显示文本 A。单击按钮 B 时，其下方会显示文本 B。单击按钮 C 时，它不会显示任何内容。

我已经解决了所有问题，但是一旦我将其放入php文件中，带有show/hide函数的javascript函数就不起作用，并且div一直显示：当我单击相应的按钮时没有。

我猜它必须与我将代码放置在 PHP 文件中的方式有关，但我无法指出我做错了什么......

希望这里有人能帮忙！提前感谢您对新手的耐心帮助。:)

.HTML：

<div class="option-50">
50ml option selected
</div>
<div class="option-15">
15ml option selected
</div>

<div id="50ml">50ml</div>
<div id="15ml">15ml</div>
<div id="set">set</div>

Javascript：

<script>
$(function() { 
$('div').click(function(){    
if(this.id == '50ml'){
$('.option-50').show();
$('.option-15').hide();
} else if(this.id == '15ml'){
$('.option-50').hide();
$('.option-15').show();
} else {
$('.option-50').hide();
$('.option-15').hide();
}
})
});
</script>

.CSS：

div{
width: 200px;
height: 200px;
background: cornflowerblue;
line-height: 200px;
text-align: center;
margin: 10px;
}
.option-50{
background: red;
display: none;
}
.option-15{
background: green;
display: none;
}

Answer 1

为此，我使用样式属性将display: blockdisplay: none分配给特定节点，请在下面找到工作代码片段，并确保在您的索引中导入jQuery.html：

$(function() { 
$('div').click(function(){    
if(this.id == '50ml'){
$('.option-50')[0].style.display = 'block'
$('.option-15')[0].style.display = 'none';
} else if(this.id == '15ml'){
$('.option-50')[0].style.display = 'none';
$('.option-15')[0].style.display = 'block';
} else {
$('.option-50')[0].style.display = 'none';
$('.option-15')[0].style.display = 'none';
}
})
});

div{
width: 200px;
height: 200px;
background: cornflowerblue;
line-height: 200px;
text-align: center;
margin: 10px;
}
.option-50{
background: red;
display: none;
}
.option-15{
background: green;
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="option-50">
50ml option selected
</div>
<div class="option-15">
15ml option selected
</div>
<div id="50ml">50ml</div>
<div id="15ml">15ml</div>
<div id="set">set</div>

Answer 2

你需要把Javascript放在脚本标签中

<script>
$(function() { 
$('div').click(function(){    
if(this.id == '50ml'){
$('.option-50').show();
$('.option-15').hide();
} else if(this.id == '15ml'){
$('.option-50').hide();
$('.option-15').show();
} else {
$('.option-50').hide();
$('.option-15').hide();
}
})
});
</script>