Question

我创建了自己的网站，但我遇到了div的属性问题。我尝试在屏幕较小时更改值。

我的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) ;}
}

我的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>

我想更改数据-x但不能使用我发现的所有可能性...你能帮助我吗？感谢。

Answer 1

您最好的建议是制作能够检查浏览器屏幕尺寸是否发生变化的内容，而不是相应地设置data - 属性：

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>

但您必须记住，仅更改数据属性可能不一定会改变滑块的行为。您可能最好首先获得一个响应滑块。

Answer 2

您可以使用AngularJS执行此操作示例：https://docs.angularjs.org/guide/directive

使用mediaquery更改值数据属性

2 个答案: