मैं विंडो आकार के आधार पर स्क्रिप्ट चलाने के लिए चाहता हूँ। जब मैं ब्राउज़र का आकार बदलने के दौरान कथन काम नहीं कर रहा हूं तो आवेदन करता हूं। वर्तमान कोड केवल तभी काम करता है जब मैं प्रत्येक स्क्रीन में पृष्ठ को पुनः लोड करता हूं। मुझे jQuery में मीडिया क्वेरी अगर और अन्य का उपयोग करके पेज लोड के बिना स्क्रिप्ट चलाने की ज़रूरत है। कोई भी मुझे इसे हासिल करने में मदद करता है।

मेरी वेबिस्ट

    $(window).resize(function() {
    if ($(window).width() > 1200) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 22;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    }
    if ($(window).width() < 1199) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 15;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    }
    if ($(window).width() < 991) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 10;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    }
    if ($(window).width() < 639) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 10;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    }
});
0
John 30 मार्च 2018, 12:30

3 जवाब

सबसे बढ़िया उत्तर

मैंने इसका इस्तेमाल करने की कोशिश की है। यह मेरे लिए काम कर रहा है

$(window).on("load resize", function(e) {
        $('a.read_more_sec').each(function() {
            $(this).remove()
        });
        $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
            var text = $(this).text();
            if ($(this).find(".vhide").length == 0) {
                $(this).html('');
                $(this).text($.trim(text))
            }
        });
        if ($(window).width() > 1200) {
            $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
                var words = $(this).text();
                var maxWords = 21;
                if (words.length > maxWords) {
                    html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                    $(this).html(html)
                    $(this).find('a.read_more_sec').click(function(event) {
                        $(this).toggleClass("less");
                        event.preventDefault();
                        if ($(this).hasClass("less")) {
                            $(this).html("<i class='fa fa-arrow-left'></i>")
                            $(this).parent().find(".more_text").show()
                        } else {
                            $(this).html("<i class='fa fa-arrow-right'></i>")
                            $(this).parent().find(".more_text").hide()
                        }
                    })
                }
            })
        } else if ($(window).width() < 1199 && $(window).width() >= 1025) {
            $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
                var words = $(this).text();
                var maxWords = 15;
                if (words.length > maxWords) {
                    html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                    $(this).html(html)
                    $(this).find('a.read_more_sec').click(function(event) {
                        $(this).toggleClass("less");
                        event.preventDefault();
                        if ($(this).hasClass("less")) {
                            $(this).html("<i class='fa fa-arrow-left'></i>")
                            $(this).parent().find(".more_text").show()
                        } else {
                            $(this).html("<i class='fa fa-arrow-right'></i>")
                            $(this).parent().find(".more_text").hide()
                        }
                    })
                }
            })
        } else if ($(window).width() < 1025 && $(window).width() >= 991) {
            $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
                var words = $(this).text();
                var maxWords = 15;
                if (words.length > maxWords) {
                    html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                    $(this).html(html)
                    $(this).find('a.read_more_sec').click(function(event) {
                        $(this).toggleClass("less");
                        event.preventDefault();
                        if ($(this).hasClass("less")) {
                            $(this).html("<i class='fa fa-arrow-left'></i>")
                            $(this).parent().find(".more_text").show()
                        } else {
                            $(this).html("<i class='fa fa-arrow-right'></i>")
                            $(this).parent().find(".more_text").hide()
                        }
                    })
                }
            })
        } else if ($(window).width() < 991 && $(window).width() >= 767) {
            $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
                var words = $(this).text();
                var maxWords = 9;
                if (words.length > maxWords) {
                    html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                    $(this).html(html)
                    $(this).find('a.read_more_sec').click(function(event) {
                        $(this).toggleClass("less");
                        event.preventDefault();
                        if ($(this).hasClass("less")) {
                            $(this).html("<i class='fa fa-arrow-left'></i>")
                            $(this).parent().find(".more_text").show()
                        } else {
                            $(this).html("<i class='fa fa-arrow-right'></i>")
                            $(this).parent().find(".more_text").hide()
                        }
                    })
                }
            })
        } else if ($(window).width() < 767) {
            $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
                var words = $(this).text();
                var maxWords = 10;
                if (words.length > maxWords) {
                    html = words.slice(0, maxWords) + '<span class="more_text">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"></a>'
                    $(this).html(html)
                    $(this).find('a.read_more_sec').click(function(event) {
                        $(this).toggleClass("less");
                        event.preventDefault();
                        if ($(this).hasClass("less")) {
                            $(this).html("")
                            $(this).parent().find(".more_text").show()
                        } else {
                            $(this).html("")
                            $(this).parent().find(".more_text").hide()
                        }
                    })
                }
            })
        }
0
John 2 अप्रैल 2018, 03:45

दस्तावेज़ तैयार और विंडो आकार बदलने के दौरान हमें उसी फ़ंक्शन को ट्रिगर करने की आवश्यकता है। नीचे दिए गए कोड का प्रयास करें

$(document).ready(function() {
    processMenuArea($);

    $(window).resize(function() {
        processMenuArea($);
    });
});

function processMenuArea($) {
    if ($(window).width() < 639) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 10;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    } else if ($(window).width() < 991) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 10;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    } else if ($(window).width() < 1199) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 15;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    } else {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 22;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    }
}
0
Shreyas Kumar 30 मार्च 2018, 10:12

कंसोल पर दिखाई गई सिंटैक्स त्रुटि को ठीक करें: (जांचें कि क्या यह उत्तर काम करता है)

SyntaxError: Invalid character '\u200b'

एक अन्य यहां उत्तर दें चर्चा करता है कि यह शून्य चौड़ाई वाला वर्ण कैसे घुस गया होगा।

साथ ही, फॉर्म एचटीएमएल निम्नलिखित ऑनलोड हैंडलर को हटा दें।

<body onload="$(window).resize()">

इसके बजाय load और resize दोनों ईवेंट को बाइंड करने के लिए एक ईवेंट हैंडलर का उपयोग करें।

$(window).on('load resize', function(){
    var width = $(window).width();
    console.log('width', width);
})
0
sabithpocker 30 मार्च 2018, 09:48