Ändern Wert Datenattribut mit Mediaquery

Question

Ich erstelle meine Website und ich habe ein Problem mit einem Attribut eines div. Ich versuche, den Wert zu ändern, wenn der Bildschirm klein ist.

Mein css mediaquery:

@media screen and (min-width: 1000px) and (max-width: 2000px) { 
#my-content { display: block; } 
#my-slider {width: 670px;} 

} 

@media screen and (min-width: 0px) and (max-width: 1000px) { 
#my-content { display: none; } /* hide it elsewhere */ 
#my-text {font-size: 26px;} 
#my-slider {content: attr(data-x : 700) ;} 
} 

Mein html:

<div id="my-slider" class="caption sfb" data-x="500" data-y="0" data-speed="900" data-start="900" data-easing="easeOutSine"><img src="code1.jpg" width="670px" height="500px" alt="" /></div> 

ich die Daten-x ändern möchten, aber funktionieren nicht mit allen Möglichkeiten, die ich gefunden habe ... Können Sie Hilf mir? Vielen Dank.

Answer 1

Sie AngularJS verwenden können, um dieses Beispiel zu tun: https://docs.angularjs.org/guide/directive

Answer 2

Ihre beste gues ist, etwas zu bauen, wenn die Bildschirmgröße Ihres Browsers überprüft hat sich geändert, als die entsprechend data -Attribut gesetzt:

var resize = function() { 
 
    var screenWidth = parseInt($('body').width()), mySlider = $("#my-slider"); 
 
    
 
    if (screenWidth < 1000) { 
 
    mySlider.data('x','foo'); 
 
    } 
 
    else if (screenWidth < 2000) { 
 
    mySlider.data('x','bar'); 
 
    } 
 
    else { 
 
    mySlider.data('x','foo-bar'); 
 
    } 
 
} 
 

 
$(window).resize(function() { 
 
    resize(); 
 
}); 
 

 
$(document).ready(function() { 
 
    resize(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<div id="my-slider" class="caption sfb" data-x="500" data-y="0" data-speed="900" data-start="900" data-easing="easeOutSine"><img src="code1.jpg" width="670px" height="500px" alt="" /></div>

Aber Sie müssen bedenken, dass nur ein Datenattribut Änderung kann nicht notwendigerweise c Ändern Sie das Verhalten Ihres Sliders. Sie können besser sein, sich einen responsiven Slider an erster Stelle zu bekommen.