Question

我希望在屏幕小于480px时合并两个类。所以两个类需要成为一个，所以文本合并为1行。 JS在这里：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();
});

那么我做错了什么？提前谢谢！

映入眼帘，

的Wouter

Answer 1

你需要将你的函数包装在resize handler中：

$(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();
});
});

在屏幕宽度上合并两个类

1 个答案: