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

Posted 2023-05-09

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

【英文标题】：Show/Hide function not working when implementing javascript in PHP file [closed]

【发布时间】：2020-04-01 10:02:48

【问题描述】：

所以，这里是 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;

【问题讨论】：

能否请您也显示 PHP 代码？

【参考方案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>

【讨论】：

嗨 Sarvesh，成功了！非常感谢您在这方面的帮助。如果我可能会问，既然我还是一个初学者，那么你使用的 [0] 的功能是什么，为什么我的代码没有工作呢？希望你能帮帮我！

主要问题是您使用的是 jQuery，但您没有导入它，以及关于“[0]”，因为我使用的类选择器返回具有子节点作为节点的对象数组在 DOM 中，你想访问第一个孩子

我明白了！我真傻。再次感谢您，也感谢您解释我做错了什么。这真的对我有帮助:)

【参考方案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>

【讨论】：

嗨詹姆斯，感谢您的回复！我已经有了脚本标签，但忘记将它们包含在我的代码中。抱歉，刚刚编辑了它们。谢谢你的鹰眼:)