根据屏幕宽度隐藏链接标题属性 - 不会取消隐藏

时间:2014-11-21 23:41:40

标签: javascript jquery html css

我已经根据我收集的一些事情在这里做了一次尝试,但这只是简单地将它完全删除了;标题不会返回< = 768px

<script>
if( $(window).width() > 767) {

    $('[title]').each( function() {

        var $this = $(this);
        $this.data('title',$this.attr('title'));
        $this.removeAttr('title');

    });
}
</script>

请参阅http://jsfiddle.net/2nHxV/

2 个答案:

答案 0 :(得分:1)

所以放回去?

var $titles = [];

if( $(window).width()> 767) {
    $('[title]').each( function() {
        var $this = $(this);
        $this.data('title',$this.attr('title'));
        $this.removeAttr('title');

        $titles.push($this);
    });
} else {
    $.each($titles, function(index, $this) {
        $this.attr('title',$this.data('title'));
    });
}

工作演示:http://jsfiddle.net/z3rr9d04/

您也可能希望将此逻辑放在$(window).on('resize', ...);处理程序中,因为它只会在当前页面加载时执行一次。

答案 1 :(得分:1)

if ($(window).width() > 767) {
    $('[title]').each( function() {
        var $this = $(this);
        $this.data('title',$this.attr('title'));
        $this.removeAttr('title');
    });
} else {
    // as in above `title` attribute removed and `data-title` added, so now you've 
    // to loop with data-title 
    $('[data-title]').each( function() {
        var $this = $(this);
        $this.data('title',$this.data('title'));
        $this.removeAttr('data-title');
    });
}