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

Question

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

我想要达到的目标如下：

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

我已经解决了所有问题，但是一旦将其放入 php 文件中，带有显示/隐藏功能的 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: block display: none 分配给特定节点，请在下面找到工作代码 sn-p 并确保在 index.html 中导入 jQuery：

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