时间戳

首页 > 解决方案 > 单击按钮时显示和隐藏带有星号的文本

javascript - 单击按钮时显示和隐藏带有星号的文本

问题描述

我有一个带有数字 init 的段落标签。单击旁边的按钮，我想用星星/圆形圆圈替换数字。此外，我附上了我想应用该概念的屏幕截图（单击眼睛图标时，患者 ID 应替换为圆形，反之亦然）。附上我尝试过的代码。您的解决方案对我学习这些东西非常重要。TIA

在此处输入图像描述

 $('.hide-id').on('click', function () {
   $('.patient-id-content').attr('type', 'password');
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div class="container">
    <p>
      <span class="patient-id-content" type="text">34324345</span>
      <button class="hide-id">
        Hide
      </button>
    </p>
  </div>

标签： javascripthtmljquerycss

解决方案

因此，您来自 OP 的 jQuery 代码不正确。您在 a 中拥有所需的密码，span并且正在对其应用类型属性。

如果您查看MDN Docs，您将了解到 span 没有type属性，因为 span 仅支持Global Attributes。该input元素同时使用type: textand ，请参阅此处type: password的文档。

但是，如果您想将 span 作为您的元素，您可以将 jQuery 事件处理程序更改为以下内容：.toggleClass('hidden');并使用属性创建一个隐藏的 CSS 类display: none;

$('.hide-id').on('click', function () {
   $('.patient-id-content').toggleClass('hidden');
 });
.hidden { display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <p>
      <input class="patient-id-content" type="text" value="34324345">      
      <button class="hide-id">
        Hide
      </button>
    </p>
  </div>

推荐阅读