Question

在这个测验中，我要做的是首先单击要输入文本的文本框，然后单击要放入框中的值的按钮。问题 - 如果我想将值abcdefghi放在框中。如果我点击第一个按钮，然后点击第二个按钮，之前的内容就会被删除。

<html>
<head>
</head>

<body><button class="b"></button>
<button class="a">abc</button>
<button class="a">def</button>
<button class="a">ghi</button>

<div class="fill" id="f1"><input type="text" style="border:" value="">aaa</div>
<div class="fill" id="f2"><input type="text" value="">bbbb</div>
<div class="fill" id="f3"><input type="text" value="">ccc</div>


    <script src="jquery.min.js"></script>
<script type="text/javascript">

 var activeFill;

   $('.fill input').on('click',function() {
activeFill = $(this); 
 });

   $('button').on('click',function() {
  if (activeFill !== 'undefined') {
   var val = $(this).html();
   $(activeFill).val(val);
   }
  });
    </script>
     </body>
     </html>

Answer 1

您每次都要替换内容，您必须附加内容，如下所示

$('button').on('click',function() {
  if (activeFill !== 'undefined') {
   var val = $(this).html();
   //$(activeFill).val(val); -- remove this
   // append content
    var prevContent = $(activeFill).val();
    $(activeFill).val(prevContent + val);
   }
  });

但是如果您单击相同的按钮两次，上面的代码将添加重复值，以防止在代码下面重复使用

$('button').on('click',function() {
      if (activeFill !== 'undefined') {
       var val = $(this).html();
       //$(activeFill).val(val); -- remove this
       // append content
        var prevContent = $(activeFill).val();
        if(prevContent.indexOf(val)==-1) // if condition to check if text already present or not
           $(activeFill).val(prevContent + val);
       }
      });

编辑 - 由于OP需要CLEAR和DELETE按钮功能，请参阅以下代码

HTML -

<button class="delete">DELETE</button>
<button class="clear">CLEAR</button>

jQuery

//variable to store last added text
var lastAddedText = '';

$('button.a').on('click',function() {
          if (activeFill !== 'undefined') {
           var lastAddedText = $(this).html();
           // append content
            var prevContent = $(activeFill).val();
            if(prevContent.indexOf(lastAddedText)==-1) // if condition to check if text already present or not
               $(activeFill).val(prevContent + lastAddedText);
           }
          });

$('button.delete').on('click',function() {
    var val = $(activeFill).val();
    val = val.substring(0,val.length-1);
    $(activeFill).val(val);
});

$('button.clear').on('click',function() {
    $(activeFill).val('');
});

<强> JSfiddle Demo

Answer 2

非常简单 - 您需要添加以前的值：

 $(activeFill).val($(activeFill).val() + val);

填写空白测验

2 个答案: