如何設置這些按鈕的'id'值以附加在textarea中？

我已經給出了一個代碼，其中包含與不同於其正常連接鍵的字母相關的翼形字符，並且我試圖創建一個解密它們的程序。不幸的是，我無法解決如何添加到textarea，只覆蓋已經存在的對我沒有幫助的角色。如何設置這些按鈕的'id'值以附加在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>

來源

2015-05-19 Steve

'var previous = $（'＃txtarea'）。html（）; $（' #txtarea'）。html（previous +'letter'）;'?? – Hackerman

恐怕我不明白你的意思，對不起。 – Steve

沒關係..... – Hackerman

您可以使用事件委託相當簡化您的代碼。只需在您的所有輸入中添加一個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，因此您可以在行動中看到它。

來源

2015-05-19 18:05:31

這是完美的，非常感謝你！我真的需要重新閱讀這篇文章，完全在那裏領先。 – Steve

編輯：說太快了，一旦我加入其餘的行，它肯定縮短了代碼，但它不再使字母替換。 – Steve

添加到工作示例的鏈接。 –

首先擺脫那些不必要的document.ready()函數。一個這樣的函數對於所有的事件處理程序都足夠了（它簡化了你的代碼）。

你可以有更簡單的代碼.on方法如上所述，但是，請記住onfocus和onblur是文本框，而不是click事件更好的事件處理程序。

「嘗試嘗試them..it肯定會增加烏爾學習經驗之前，瞭解這些功能的意義..

爲了更好地理解是指在jquery documentation.val()和.append()方法，這可能會幫助你的問題。我強烈建議你去找文檔，而不是直接複製和粘貼你已有的解決方案，這對初學者來說是最好的選擇

來源

2015-05-19 18:21:58

好主意，並感謝您的鏈接。我用這個來嘗試和了解更多，我只是讓我的野心領先於我。 – Steve

如何設置這些按鈕的'id'值以附加在textarea中？

回答

相關問題