试图从一组元素中删除数据，并将其重新附加到每个元素(在窗口调整大小时)

Question

我的页面上有类似标记的元素:

<div class="myscrollEl" data-parallax='{"y": -1500, "from-scroll": 0, "to-scroll": 2700, "smoothness":24}'> 

我写了下面的函数(参数收集所有需要的元素来切换数据):

// resize parallax
        var parallaxSets, parallaxRemoved;
        function toggleParallax( $toggle_parallax ) {
            var ww = $(window).width();
            if ( ww < 1271 && !parallaxRemoved ) {
                parallaxRemoved = true; 
                var parallaxSets = [];
                $toggle_parallax.each( function() {
                    parallaxSets.push( $(this).data("parallax") ); // create an array field with all parallax data sets to remove and reattach
                } );
                $toggle_parallax.removeAttr("data-parallax");           
            } else {
                if ( parallaxRemoved && ww > 1270 ) {
                    parallaxRemoved = false;
                    $toggle_parallax.each( function( i ) {
                        **$(this).data( parallaxSets[i] );** // reset parallax data to each element again / throws error
                    } );    
                };
            }
        };

我的目标是删除数据(视差参数为jquery.parallax-scroll)从我的页面上的多个元素，如果浏览器窗口变得小。我可以很容易地完成第一部分。但是当窗口再次加宽时，我必须重新连接它(一次只能来回)。

似乎我的代码做的工作也存储数据集(控制台日志检查，返回我的数组正确):

Array (7)
0 {y: 240, from-scroll: 0, to-scroll: 5000, smoothness: 50}
1 {y: -50, from-scroll: 0, to-scroll: 500, smoothness: 50}
2 {y: -240, from-scroll: 150, to-scroll: 900, smoothness: 50}
3 {y: -300, from-scroll: 1050, to-scroll: 1270, smoothness: 50}
4 {y: -500, from-scroll: 420, to-scroll: 1500, smoothness: 50}
5 {y: -460, from-scroll: 3000, to-scroll: 3200, smoothness: 50}
6 {y: -500, from-scroll: 270, to-scroll: 3600, smoothness: 50}

但是在下一行它卡住了:

$(this).data( parallaxSets[i] );

有这个错误:" TypeError: undefined不是一个对象(求值'index') "我无法超越它的原因。我的计划是将每个数据集重新连接到每个元素。

可能这里有一些语法错误?非常感谢你的帮助!

编辑

在charlietfl的想法的帮助下(谢谢你!)我让它像这样工作:

var $toggle_parallax = $("#element_1, #element_2");
            $toggle_parallax.each( function() {
                $(this).data('backup',$(this).data('parallax'));
            } );
            toggleParallax( $toggle_parallax );
            $(window).on('resize', function() {
                toggleParallax( $toggle_parallax );
            } );
// resize parallax
        var parallaxRemoved;
        function toggleParallax( $toggle_parallax ) {
            var ww = $(window).width();
            if ( ww < 1271 && !parallaxRemoved ) {
                parallaxRemoved = true; 
                $toggle_parallax.each( function() {
                        $(this).removeAttr("data-parallax").removeAttr("style");
                    } );                    
            } else {
                if ( parallaxRemoved && ww > 1270 ) {
                    $toggle_parallax.each( function( i ) {
                        $(this).attr('data-parallax',$(this).data('backup') );
                    } );
                    parallaxRemoved = false;
                }           
            }
        };

技巧是改变这一行:

$(this).data('parallax',$(this).data('backup') );  

到:

$(this).attr('data-parallax',$(this).data('backup') );

然后它工作了，即使它激怒了我，DOM元素之后看起来像这样:…data-parallax="[object object]"…

猜这是插件处理数据的方式。但它有效，所以感谢你们!

Answer 1

如果必须删除该属性，则只需将数据存储在同一元素中，但使用不同的键。

页面加载

 $('[data-parallax]').each(function(){
    $(this).data('backup',$(this).data('parallax'));
 });

然后复位

$toggle_parallax.each( function( i ) {
     $(this).data('parallax',$(this).data('backup') );
});