0

我有用于插入表情符号的 EmojioneArea 插件，<textarea>但是当我切换我的 html 选项卡时，表情符号插件消失了。我不知道为什么。我将问题写给插件开发人员，他们说插件工作正常，问题是在 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
        });
4

1 回答 1

0

好吧。 这是一个工作小提琴。我什至不确定如何解释到底出了什么问题，但我想提供一些反馈。

首先：我怀疑你在这方面有点新，对你学习很好。

  1. 您的 HTML 标记有问题

    1. 您在不同元素上多次使用相同的 ID。那是不行的。每页只能使用一次 ID。
    2. UL标签不能在P标签内部使用，并且LI标签不能是其他LI标签的直接子代。
    3. 您似乎有多个实际上没有做任何事情的元素实例。
    4. 你有太多不必要的标识符。如果选择器没有用于某些事情，请摆脱它们。它使代码更难使用，并且在代码中断时更难修复。

  2. 你的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');
    });

});

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

祝你好运。

于 2018-08-25T00:49:34.810 回答