Question

我已经获得了一个代码，其中包含与不同于其普通附加键的字母相关的翼形字符，我正在尝试创建一个解密它们的程序。不幸的是我无法解决如何添加到textarea，只覆盖那里对我没有帮助的角色。

我是一个完全的初学者，特别是Jscript，所以我希望这是有道理的。有人可以帮忙吗？

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<br>
<!-- PLCKFBGDHMOERJAQNXYIZVXSUT cypher alphabet-->
<input type="submit" style="font-family:'wingdings'" value="P" style="width:100%"  id="A" />
<input type="submit" style="font-family:'wingdings'" value="L" style="width:100%"  id="B" />
<input type="submit" style="font-family:'wingdings'" value="C" style="width:100%"  id="C" />
<input type="submit" style="font-family:'wingdings'" value="K" style="width:100%"  id="D" />
<input type="submit" style="font-family:'wingdings'" value="F" style="width:100%"  id="E" />
<input type="submit" style="font-family:'wingdings'" value="B" style="width:100%"  id="F" />
<input type="submit" style="font-family:'wingdings'" value="G" style="width:100%"  id="G" />
<br>
<br>
<input type="submit" style="font-family:'wingdings'" value="D" style="width:100%"  id="H" />
<input type="submit" style="font-family:'wingdings'" value="H" style="width:100%"  id="I" />
<input type="submit" style="font-family:'wingdings'" value="M" style="width:100%"  id="J" />
<input type="submit" style="font-family:'wingdings'" value="O" style="width:100%"  id="K" />
<input type="submit" style="font-family:'wingdings'" value="E" style="width:100%"  id="L" />
<input type="submit" style="font-family:'wingdings'" value="R" style="width:100%"  id="M" />
<input type="submit" style="font-family:'wingdings'" value="J" style="width:100%"  id="N" />
<br>
<br>
<!-- I'll add the rest later -->

<textarea id="txtarea" name="txtarea"></textarea>

<script>

// INDIVIDUAL LETTER INPUT CODES
$(document).ready(function(){
  $("#A").click(function(){
      $('#txtarea').html('A');
});
});

$(document).ready(function(){
  $("#B").click(function(){
      $('#txtarea').html('B');
});
});

$(document).ready(function(){
  $("#C").click(function(){
      $('#txtarea').html('C');
});
});
$(document).ready(function(){
  $("#D").click(function(){
      $('#txtarea').html('D');
});
});
$(document).ready(function(){
  $("#E").click(function(){
      $('#txtarea').html('E');
});
});
$(document).ready(function(){
  $("#F").click(function(){
      $('#txtarea').html('F');
});
});
$(document).ready(function(){
  $("#G").click(function(){
      $('#txtarea').html('G');
});
});
$(document).ready(function(){
  $("#H").click(function(){
      $('#txtarea').html('H');
});
});
$(document).ready(function(){
  $("#I").click(function(){
      $('#txtarea').html('I');
});
});
$(document).ready(function(){
  $("#J").click(function(){
      $('#txtarea').html('J');
});
});
$(document).ready(function(){
  $("#K").click(function(){
      $('#txtarea').html('K');
});
});
$(document).ready(function(){
  $("#L").click(function(){
      $('#txtarea').html('L');
});
});
$(document).ready(function(){
  $("#M").click(function(){
      $('#txtarea').html('M');
});
});
$(document).ready(function(){
  $("#N").click(function(){
      $('#txtarea').html('N');
});
});
</script>
<!-- Ill add the rest later -->
</body>

Answer 1

您可以使用事件委派大大简化代码。只需在所有输入周围添加div即可。

<div id="letters">
  <input type="submit" style="font-family:'wingdings'" value="P" style="width:100%"  id="A" />
  <input type="submit" style="font-family:'wingdings'" value="L" style="width:100%"  id="B" />
<!-- etc  -->
</div>

然后你的jQuery只需要一个事件。

$(document).ready(function(){
  var txt=$('#txtarea');
  $("#letters").on('click','input',function() {
    txt.val(txt.val()+this.value);
  });
});

我相信你能做到你想做的事。

您可以创建一个包含style属性的类，并将其应用于所有input。

.letters {
  font-family:'wingdings';
  width:100%;
}

<input type="submit" class="letters" value="P"/>

我创建了fiddle，因此您可以看到它的实际效果。

Answer 2

首先摆脱那些不必要的document.ready()函数。一个这样的函数足以用于所有事件处理程序（它简化了代码）。

如上所述，您可以使用更简单的代码作为.on方法，但请记住onfocus和onblur是文本框而不是click事件的更好的事件处理程序。 / p>

“在尝试之前尝试理解这些功能的含义。这肯定会增加你的学习经验..

为了更好地理解，请参考jquery documentation中的.val()和.append()方法。这可能对您的问题有所帮助。我强烈建议你去找文档，而不是直接复制和粘贴你得到的解决方案。这对初学者来说是最好的。

如何将这些按钮的“id”值设置为附加在textarea中？

2 个答案: