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

Question

所以，这里涉及到javascript和PHP的新手，但是我一直在稳步学习。不过，我仍然需要向你们寻求帮助。我试图编写一段JavaScript，当单击某个按钮时显示和隐藏带有文本的div。

我想要实现的目标是：

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

我已经完成了所有工作，但是一旦将其放置在php文件中，带有show / hide函数的javascript函数将无法使用，并且div仍将显示在显示器上：当我单击相应的按钮时，没有显示。

我猜测它必须与将代码放置在PHP文件中的方式有​​关，但是我不能指责我做错了什么...

我希望这里有人能帮忙！预先感谢您对newb的帮助，耐心等待。 ：）

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

您需要将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>

Answer 2

我已使用style属性为此目的将display: block display: none分配给特定节点，请在下面找到工作代码段，并确保将jQuery导入到index.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>