Question

我有两个带有不同ID的textareas，它们都有用于文本格式化的wysiwyg按钮。我可以将格式化标签插入到第一个textarea中，但是当我尝试将标签插入第二个textarea时，标签会插入到第一个textarea中。显然，当我使用分配给各自textarea的按钮时，我希望将格式标签插入相应的textarea中。在jQuery中，我尝试将按钮的id存储为与＆＃39;＃textarea＆＃39;重新创建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>

Answer 1

问题是，在您的点击处理程序中，您获得了对第一个按钮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>");
            })
        })

Answer 2

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

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

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

Answer 3

您不得对多个控件使用相同的ID。我的建议是使用虚拟属性eg'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的几个textarea？

3 个答案: