Javascript проблема при переключении вкладок HTML, содержание исчезает - PullRequest
Новая
       31

Javascript проблема при переключении вкладок HTML, содержание исчезает

0 голосов
/ 25 августа 2018

У меня есть плагин EmojioneArea для вставки эмодзи в <textarea>, но когда я переключаю свои 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
        });

1 Ответ

0 голосов
/ 25 августа 2018

Хорошо. вот рабочая скрипка .Я даже не уверен, как объяснить, что именно не так, но я хочу дать некоторые отзывы.

Во-первых: я подозреваю, что вы немного новичок в этом, так хорошо для вас.

  1. Ваша HTML-разметка была проблематичной

    1. Вы неоднократно использовали один и тот же идентификатор для разных элементов.Это нет-нет.Идентификаторы могут использоваться только один раз на странице. Теги
    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');
    });

});

Это в основном длинная и короткая часть этого.Я бы посоветовал вам всегда сохранять отступы и выравнивание.Очень трудно отлаживать код, который нелегко читать.

Удачи.

...