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

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 3 年前。

Improve this 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

为此目的，我已使用 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>