【发布时间】：2018-03-30 09:30:05
【问题描述】：
我想根据窗口调整大小运行脚本。当我在浏览器调整大小时应用 if 语句不起作用时。当前代码仅在我在每个屏幕中重新加载页面时才起作用。我需要在 jquery 中使用 if 和 else if 媒体查询在没有页面加载的情况下运行脚本。任何人都可以帮助我实现这一目标。
$(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();
}
})
}
});
}
});
【问题讨论】：
-
您遇到什么错误？如果您的脚本在调整大小时执行，您是否通过打印消息来检查控制台？
-
你有一个 });在您网站上不应该存在的脚本末尾。
-
当我根据媒体查询调整脚本大小时不起作用。
-
@OnyxCaldin 哪个地方
-
@John 就在 $(window).on('resize', function() { ..... });
标签： javascript jquery html