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

Question

我有一个数字为init的段落标签。单击旁边的按钮后，我想用星号/圆形圆圈替换数字。此外，我附上了一个截图，我想应用这个概念(在单击眼睛图标时，患者Id应替换为圆形圆圈，反之亦然)。附上我尝试过的代码。你的解决方案对我学习东西非常重要。提亚

enter image description here

​

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

​

Answer 1

这就是你所需要的。

 $(".hide-id").on("click", function () {
      var span = $(".patient-id-content");
      var spanText = span.text();
      if (!spanText.indexOf("*")) {
        $(".patient-id-content").text(span.attr("data-oldText"));
        return;
      }

      var starText = "";
      for (let i = 0; i < spanText.length; i++) starText += "*";
      $(".patient-id-content")
        .attr("data-oldText", spanText)
        .text(starText);
    });

jsfiddle上的工作示例：https://jsfiddle.net/ynojkf0q/

Answer 2

所以你从OP得到的jQuery代码是不正确的。您已经拥有了想要作为span中的密码的内容，并且正在对其应用类型属性。

如果检查MDN Docs，就会发现跨度没有type属性，因为跨度只支持Global Attributes。input元素同时使用type: text和type: password，请参阅文档here。

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

​

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

​

Answer 3

这是您想要的功能的简单解决方案。它需要更多的样式来让它看起来与你上面提供的例子一模一样。

HTML

 <div class="container">
    <p>
      <input class="patient-id-content" type="password" value="34324345">
      <button id="pass-toggle" class="hide-id" onclick="toggleShowPassword()">
        Show
      </button>
    </p>
  </div>

JS

let passwordVisible = false;
 
 function toggleShowPassword() {
    let inputType = 'password';
  passwordVisible = !passwordVisible;
  
  
  if (passwordVisible) {
    inputType = 'text';
    $('#pass-toggle').addClass( "show-id" ).text( 'Hide' );
  } else {
     $('#pass-toggle').removeClass( "show-id" ).text( 'Show' );
  }
  
  $('.patient-id-content').attr('type', inputType);

CSS

.patient-id-content {
  border: 0;
}