jquery - 在屏幕宽度上合并两个类

Question

当我的屏幕小于 480 像素时，我想合并两个类。所以两个类需要变成一个类，所以文本被合并到 1 行中。 JSfiddle 在这里:http://jsfiddle.net/rMd9T/1/

这是我的 HTML:

<p class="latestworktitle">Shazam</p><p class="latestworktitle2">Redesign</p>

这是我目前无法使用的 Jquery:

jQuery(function($) {

var $window = $(window),
width;

function mergeprojectitles() {
    width = $window.width();
    if ( width < 480 ) return;
    $('.latestworktitle').last().html( $('.latestworktitle').last().html() + ' ' + $('.latestworktitle2').last().html());
    $('.latestworktitle2').remove();
    }
    mergeprojectitles();
});

那我做错了什么？提前致谢!

问候，

沃特

Answer 1

您需要将您的函数包装在调整大小处理程序中:

$(window).on('resize',function(){
//your code here
});

完整代码:

jQuery(function($) {
$(window).on('resize',function(){
var $window = $(window),
width;

function mergeprojectitles() {
    width = $window.width();
    if ( width < 480 ) return;
    $('.latestworktitle').last().html( $('.latestworktitle').last().html() + ' ' + $('.latestworktitle2').last().html());
    $('.latestworktitle2').remove();
    }
    mergeprojectitles();
});
});