Почему переключатель jquery работает на предварительном просмотре настройщика, но не работает в WordPress / WooCommerce - PullRequest
Новая
       17

Почему переключатель jquery работает на предварительном просмотре настройщика, но не работает в WordPress / WooCommerce

0 голосов
/ 07 апреля 2019

Я хочу добавить элемент showquire jquery на мою страницу woocommerce, но он не отображается в обычной версии сайта. Он показывается только на превью настройщика и там работает хорошо.

Я протестировал множество различных кодов переключения jquery, и они всегда одинаковы ... У меня нет кэширования, может быть, это какая-то проблема с javascript для темы? Я не понимаю, почему это имеет значение в предварительном просмотре настройщика ...

Это мой код, который работает в версии настройщика, но не в обычной: 

<style>
    .addReadMore.showlesscontent .SecSec,
    .addReadMore.showlesscontent .readLess {
        display: none;
    }

    .addReadMore.showmorecontent .readMore {
        display: none;
    }

    .addReadMore .readMore,
    .addReadMore .readLess {
        font-weight: bold;
        margin-left: 2px;
        color: blue;
        cursor: pointer;
    }

    .addReadMoreWrapTxt.showmorecontent .SecSec,
    .addReadMoreWrapTxt.showmorecontent .readLess {
        display: block;
    }
</style>

<script>

function AddReadMore() {
    //This limit you can set after how much characters you want to show Read More.
    var carLmt = 280;
    // Text to show when text is collapsed
    var readMoreTxt = " ... Read More";
    // Text to show when text is expanded
    var readLessTxt = " Read Less";


    //Traverse all selectors with this class and manupulate HTML part to show Read More
    $(".addReadMore").each(function() {
        if ($(this).find(".firstSec").length)
            return;

        var allstr = $(this).text();
        if (allstr.length > carLmt) {
            var firstSet = allstr.substring(0, carLmt);
            var secdHalf = allstr.substring(carLmt, allstr.length);
            var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore'  title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>";
            $(this).html(strtoadd);
        }

    });
    //Read More and Read Less Click Event binding
    $(document).on("click", ".readMore,.readLess", function() {
        $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
    });
}
$(function() {
    //Calling function after Page Load
    AddReadMore();
});

</script>

<p class="addReadMore showlesscontent">Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die Suche im Internet nach "lorem ipsum" macht viele Webseiten sichtbar, wo diese noch immer vorkommen. Mittlerweile gibt es mehrere Versionen des Lorem Ipsum, einige zufällig, andere bewusst (beeinflusst von Witz und des eigenen Geschmacks)Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die</p>

1 Ответ

0 голосов
/ 07 апреля 2019

ОК нашел решение: проблема была в $ ... заменил его на jquery.

Классическая проблема WordPress с JQuery! 

<script>
function AddReadMore() {
    var carLmt = 280;
    var readMoreTxt = " ... Read More";
    var readLessTxt = " Read Less";
    jquery(".addReadMore").each(function() {
        if (jquery(this).find(".firstSec").length)
            return;
        var allstr = jquery(this).text();
        if (allstr.length > carLmt) {
            var firstSet = allstr.substring(0, carLmt);
            var secdHalf = allstr.substring(carLmt, allstr.length);
            var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore'  title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>";
            jquery(this).html(strtoadd);
        }
    });
    jquery(document).on("click", ".readMore,.readLess", function() {
        jquery(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
    });
}
jquery(function() {
    AddReadMore();
});
</script>
...