Question

我有EmojioneArea插件，用于在<textarea>中插入emojys，但是当我切换html标签时，emoji插件消失了。.我不知道为什么..我将问题写给插件开发人员，他们说插件正常，问题出在javascript选项卡上。需要一些帮助，谢谢！

HTML：

<ol class="timeline clearfix">
                <li class="spine"></li><br>
                <li class="left"></li>
                       <div class="boxsh unit" id="tabs">
                         <span class="ajax_indi"> 
                        <!-- Units -->

                        <div class="boxpost tabs1 actionUnits" id="tabs-1">

                            <form id="npost" name="npost">
                                <p class="formUnit" id="Status"> <i class="active"></i>
                                    <textarea class="emojis click url" name="message" placeholder="Write your status here..." id="message" cols="30" rows="3"></textarea>
                                <ul class="controls clearfix" id="tabs">
                                    <li class="post">
                                       <li><a href="#tabs-1"><i class="icon icon-status"></i>Status</a></li>
                                       <li><a href="#tabs-2"><i class="icon icon-photo"></i>photo</a></li>
                                       <li><a href="#tabs-3"><i class="icon icon-video"></i>Video</a></li>
                                         <input class="pull-right uibutton confirm fb_submit" type="button" title="npost" value="Post">
                                    </li>
                                </ul>
                                </p>
                            </form>

                        </div>
                        <div class="boxpost tabs2 actionUnits" id="tabs-2">

                            <form id="picpost" name="picpost">
                                    <p class="formUnit"> <i class="active_pic"></i>
                                     <textarea class="emojis1 click" name="message" placeholder="Photo Description..." id="pmessage" cols="30" rows="3"></textarea> 
                                    <input type="hidden" name="pic_url" id="pic_url">
                                    <button class="btn btn-xs btn-danger" type="button" id="upload_pic">Insert picture</button><span id="statuss"></span>
                                <ul class="controls clearfix" id="tabs">
                                    <li class="post">
                                       <li><a id="#tabs1" href="#tabs-1"><i class="icon  icon-status"></i>Status</a></li>
                                       <li><a id="#tabs-2" href="#tabs-2"><i class="icon  icon-photo"></i>Photo</a></li>
                                       <li><a href="#tabs-3"><i class="icon  icon-video"></i>Video</a></li>
                                          <input class="pull-right uibutton confirm fb_submit" type="button" title="picpost" value="Post">
                                    </li>
                                </ul>
                                </p>
                                <p id="files"></p>
                            </form>
                        </div>
                        <div class="boxpost tabs3 actionUnits" id="tabs-3">

                            <form id="vidpost" name="vidpost">
                                <p class="formUnit" id="Status"> <i class="active_vid"></i>
                                    <textarea name="message" class="emojis2 click" placeholder="Video description..." id="vmessage" cols="30" rows="3"></textarea>
                                    <input type="text" name="y_link" style="width:100%;border-radius: 4px;height: 35px;" id="y_link" placeholder="Youtube Url - www.youtube.com/watch?v=rdmycu13Png">
                                <ul class="controls clearfix" id="tabs">
                                    <li class="post">
                                       <li><a href="#tabs-1"><i class="icon icon-status"></i>Status</a></li>
                                       <li><a href="#tabs-2"><i class="icon icon-photo"></i>Photo</a></li>
                                       <li><a href="#tabs-3"><i class="icon icon-video"></i>Video</a></li>
                                         <input class="pull-right uibutton confirm fb_submit" type="button" title="vidpost" value="Post">
                                    </li>
                                </ul>
                                </p>
                            </form>
                        </div>
            </ol>

标签的Javascript脚本：

      $(document).ready(function() {
        $('#tabs div').hide();
        $('#tabs div:first').show();
        $('#tabs ul li:first').addClass('active');
        $('#tabs ul li a').click(function () {
            $('#tabs ul li').removeClass('active');
            $(this).parent().addClass('active');
             $('#tabs div').hide();
            $($(this).attr("href")).show();

            return false;
        });

// EmojionArea plugin
$('#message').emojioneArea({
    pickerPosition: "bottom",
    filtersPosition: "bottom",
    tones: false,
    autocomplete: false,
    autoHideFilters : true,
    useSprite       : true,
    inline: true
        });
$('#pmessage').emojioneArea({
    pickerPosition: "bottom",
    filtersPosition: "bottom",
    tones: false,
    autocomplete: false,
    autoHideFilters : true,
    useSprite       : true,
    inline: true
        });
$('#vmessage').emojioneArea({
    pickerPosition: "bottom",
    filtersPosition: "bottom",
    tones: false,
    autocomplete: false,
    autoHideFilters : true,
    useSprite       : true,
    inline: true
        });

Answer 1

好的。 here is a working fiddle。我什至不确定如何确切地解释问题所在，但我想提供一些反馈。

首先，我怀疑您在这方面有些新奇，对您的学习很有帮助。

您的HTML标记有问题
1. 您在不同的元素上多次使用了相同的ID。那是不可以的。每个页面只能使用一次ID。
2. UL标签不能在P标签内使用，并且LI标签不能是其他LI标签的直接子元素。
3. 您似乎有多个元素实例，这些元素实际上并没有执行任何操作。
4. 您有太多不必要的标识符。如果没有使用选择器，请摆脱它们。它使代码更难处理，并且在破裂时更难修复。

您的JavaScript重复很多。有些东西被添加，删除，添加回去并被多次执行。这是我弄清楚后终于得到的结果：

$(document).ready(function () {

    $("#message,#pmessage,#vmessage").emojioneArea({
        inline: true,
        hideSource: true,
        pickerPosition: "right",
        tonesStyle: "bullet",
    });

    $('li a').on('click', function (e) {
        if ($(this).is('.active')) {
                e.preventDefault();
            return;
            }
       var activeTab = $(this).attr('href');
        var newTab = $(activeTab);
        var newTabAnchor = newTab.find('a').filter(function (e) {
            return this.href.replace('https://fiddle.jshell.net/_display/','') === activeTab;
        });
        $('.active').removeClass('active');
        newTab.add(newTabAnchor).addClass('active');
    });

});

基本上就是它的长短。我建议您始终保持缩进和对齐。调试不易阅读的代码非常困难。

祝你好运。

切换html标签时出现Javascript问题，内容消失

1 个答案: