如何将文本插入到几个带有 id 的文本区域中的一个文本区域中

How to insert text into one textarea out of several with id?

本文关键字：文本 区域 插入 一个 id 几个      更新时间：2023-09-26

我有两个具有不同ID的文本区域，它们都有用于文本格式的所见即所得按钮。我可以将格式化标签插入第一个文本区域，但是当我尝试将标签插入第二个文本区域时，标签会插入到第一个文本区域中。显然，当我使用分配给其各自文本区域的按钮时，我希望将格式标签插入适当的文本区域中。在jQuery中，我尝试存储按钮的id，以与"#textarea"连接以重新创建文本区域ID。

        <button class="B" id="11">B</button>
        <button class="I" id="11">I</button>
        <button class="U" id="11">U</button>
        <button class="S" id="11">S</button>
        <div id="textarea1" class="textareaWrapper">
            <textarea id="textarea11" class="textarea"></textarea>
        </div>
        <button class="B" id="22">B</button>
        <button class="I" id="22">I</button>
        <button class="U" id="22">U</button>
        <button class="S" id="22">S</button>
        <div id="textarea2" class="textareaWrapper">
            <textarea id="textarea22" class="textarea"></textarea>
        </div>
        <script>
            $(document).ready(function () {
                $('button.B').click(function () {
                    var id = $('button.B').attr('id');
                    $('#textarea' + id).val($('#textarea' + id).val() + id);
                })
                $('button.I').click(function () {
                    var id = $('button.I').attr('id');
                    $('#textarea' + id).val($('#textarea' + id).val() + "<i></i>");
                })
                $('button.U').click(function () {
                    var id = $('button.U').attr('id');
                    $('#textarea' + id).val($('#textarea' + id).val() + "<u></u>");
                })
                $('button.S').click(function () {
                    var id = $('button.S').attr('id');
                    $('#textarea' + id).val($('#textarea' + id).val() + "<s></s>");
                })
            })
        </script>

问题是在你的点击处理程序中，你得到了第一个按钮 id 的引用。

试试这个： $(this).attr('id');

喜欢：

         $(document).ready(function () {
            $('button.B').click(function () {
                var id = $(this).attr('id');
                $('#textarea' + id).val($('#textarea' + id).val() + id);
            })
            $('button.I').click(function () {
                var id = $(this).attr('id');
                $('#textarea' + id).val($('#textarea' + id).val() + "<i></i>");
            })
            $('button.U').click(function () {
                var id = $(this).attr('id');
                $('#textarea' + id).val($('#textarea' + id).val() + "<u></u>");
            })
            $('button.S').click(function () {
                var id = $(this).attr('id');
                $('#textarea' + id).val($('#textarea' + id).val() + "<s></s>");
            })
        })

不得对多个控件使用相同的 ID。我的建议是使用虚拟属性，例如"data-group"，它可以在JavaScript中使用，浏览器只是忽略它。喜欢：

        <button class="B" data-group="1">B</button>
        <button class="I" data-group="1">I</button>
        <button class="U" data-group="1">U</button>
        <button class="S" data-group="1">S</button>
        <div id="textarea1" class="textareaWrapper">
            <textarea id="textarea11" class="textarea"></textarea>
        </div>
        <button class="B" data-group="2">B</button>
        <button class="I" data-group="2">I</button>
        <button class="U" data-group="2">U</button>
        <button class="S" data-group="2">S</button>
        <div id="textarea2" class="textareaWrapper">
            <textarea id="textarea22" class="textarea"></textarea>
        </div>
        <script>
            $(document).ready(function () {
                $('button.B').click(function () {
                    var grp = $('button.B').attr('data-group');
                    $('#textarea' + grp).val($('#textarea' + grp).val() + id);
                })
                $('button.I').click(function () {
                    var grp = $('button.I').attr('data-group');
                    $('#textarea' + grp).val($('#textarea' + grp).val() + "<i></i>");
                })
                $('button.U').click(function () {
                    var grp = $('button.U').attr('data-group');
                    $('#textarea' + grp).val($('#textarea' + grp).val() + "<u></u>");
                })
                $('button.S').click(function () {
                    var grp = $('button.S').attr('data-group');
                    $('#textarea' + grp).val($('#textarea' + grp).val() + "<s></s>");
                })
            })
        </script>

希望它有效。

问题在于您检索 ID 的方式：

$('button.S').attr('id');

这将获取传递选择器的第一个元素的 id。考虑一下这个JSFiddle。

相关文章：