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

Question

I've made an attempt here based on some things I have gleaned, but this is just plain removing it altogether; the title doesn't return back at <= 768px

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

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

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

    });
}
</script>

See http://jsfiddle.net/2nHxV/

Answer 1

So put it back?

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'));
    });
}

Working demo: http://jsfiddle.net/z3rr9d04/

You also might want to put this logic inside a $(window).on('resize', ...); handler since it'll only be executed once on page load as it stands currently.

Answer 2

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');
    });
}