Javascript 使用jquery删除span

我正在尝试使用jquery删除类的跨度。我的目标是消除这个跨度，当屏幕小于480px时。我已经尝试了。删除（）；但当屏幕低于480px时，它不会消除跨度

我使用CSS/媒体查询来控制和自定义页面

这是我的小提琴：

HTML

<span class="textbox">This is what we made of you!</span>

JQUERY

$(document).ready(function () {
     var words = [
                    'Special', 'Dynamic', 'Simple', 'Great', 'Better',
                    'Stronger', 'Stylish', 'Flawless', 'Envied',
                    'Strong', 'Sucessful', 'Grow', 'Innovate', 'Global',
                    'Knowledgable', 'Unique', 'Trusted', 'Efficient',
                    'Reliable', 'Stable', 'Secure', 'Sofisticated',
                    'Evolving', 'Colorful', 'Admirable', 'Sexy', 'Trending',
                    'Shine', 'Noted', 'Famous', 'Inspiring', 'Important',
                    'Bigger', 'Stylish', 'Expand', 'Proud', 'Awesome',
                    'Solid'
                    ], i = 0;
        var getRandomWord = function () {
        return words[Math.floor(Math.random() * words.length)];
        };

    setInterval(function(){
        $('.textbox').fadeOut(500, function(){
        $(this).html(getRandomWord()).fadeIn(500);
    });
    }, 5000);

});

应该是：

span.textbox{display: none;}

setInterval(function(){
    $('.textbox').animate({'opacity': 0}, 500, function(){
        $(this).html(getRandomWord()).animate({'opacity': 1}, 500);
    });
}, 3000);

因为原始代码将选择具有span父级的

textbox

类的所有元素，而不是具有

textbox

类的实际span元素

---

更新

我没有发现您使用的fadeIn实际上会覆盖您的

display:none

属性。最快的修复方法（无需检查JS中的窗口宽度等等）是设置不透明度的动画，而不是使用淡入淡出，因为这不会改变元素的显示状态，并且CSS规则将保持活动状态

因此，你的区间函数应该是：

span.textbox{display: none;}

setInterval(function(){
    $('.textbox').animate({'opacity': 0}, 500, function(){
        $(this).html(getRandomWord()).animate({'opacity': 1}, 500);
    });
}, 3000);

请在此处查看它的实际操作：

应该是：

span.textbox{display: none;}

setInterval(function(){
    $('.textbox').animate({'opacity': 0}, 500, function(){
        $(this).html(getRandomWord()).animate({'opacity': 1}, 500);
    });
}, 3000);

因为原始代码将选择具有span父级的

textbox

类的所有元素，而不是具有

textbox

类的实际span元素

---

更新

我没有发现您使用的fadeIn实际上会覆盖您的

display:none

属性。最快的修复方法（无需检查JS中的窗口宽度等等）是设置不透明度的动画，而不是使用淡入淡出，因为这不会改变元素的显示状态，并且CSS规则将保持活动状态

因此，你的区间函数应该是：

span.textbox{display: none;}

setInterval(function(){
    $('.textbox').animate({'opacity': 0}, 500, function(){
        $(this).html(getRandomWord()).animate({'opacity': 1}, 500);
    });
}, 3000);

---

查看此处的操作：

当宽度减小到480px以下时，您当前的CSS实际上会隐藏文本，但jQuery fadeIn函数会将其恢复到视图中，因为fadeIn将更改该元素的显示属性。

当宽度减小到480px以下时，您当前的CSS实际上会隐藏文本，但是jQuery fadeIn函数会将它带回视图，因为fadeIn会更改该元素的显示属性。

试试看

@media screen and (max-width: 480px) {
    .textbox {
        display: none;
    }
}

然后

var区间；
函数处理程序（）{
变量宽度=$（窗口）.width（）；
//如果窗口大小>480且未设置间隔，则创建新间隔
如果（宽度>=480&&！间隔）{
间隔=设置间隔（函数（）{
$（'.textbox'）.fadeOut（500，函数（）{
$（this.html（getRandomWord（））.fadeIn（500）；
});
}, 5000);
}否则如果（宽度<480&&间隔）{
//如果窗口宽度<480且存在间隔，则清除该窗口并隐藏文本框
间隔时间；
间隔=未定义；
$（'.textbox'）.hide（）；
}
}
handler（）；
//处理窗口大小调整的步骤
$（窗口）。调整大小（处理程序）；

演示：

试试看

@media screen and (max-width: 480px) {
    .textbox {
        display: none;
    }
}

然后

var区间；
函数处理程序（）{
变量宽度=$（窗口）.width（）；
//如果窗口大小>480且未设置间隔，则创建新间隔
如果（宽度>=480&&！间隔）{
间隔=设置间隔（函数（）{
$（'.textbox'）.fadeOut（500，函数（）{
$（this.html（getRandomWord（））.fadeIn（500）；
});
}, 5000);
}否则如果（宽度<480&&间隔）{
//如果窗口宽度<480且存在间隔，则清除该窗口并隐藏文本框
间隔时间；
间隔=未定义；
$（'.textbox'）.hide（）；
}
}
handler（）；
//处理窗口大小调整的步骤
$（窗口）。调整大小（处理程序）；

演示：