Question

我正在尝试使用jquery来检测屏幕大小调整，然后如果隐藏了我的span，则触发事件以获取data-attribute并作为类应用。

我的HTML

<nav class="primary_nav group">
    <ul class="group smart-nav">
        <li> <a href="javascript:;" class="screen-clark" data-tip="tooltip" data-class="small">Clark Kent</a> </li>
        <li> <a href="javascript:;" class="screen-tony" data-class="medium">Tony Stark</a> </li>
        <li> <a href="javascript:;" class="screen-builder" data-class="large">Bob the Builder</a> </li>
    </ul>
</nav>

<div class="secondary_control">
    <ul>
        <li><a class="s-icon" title="Poke Bob" href="#"><span>Poke Bob</span></a></li>
        <li><a class="s-icon" title="Build Ironman" href="#"><span>Build Ironman</span></a></li>
        <li><a class="s-icon" title="Poke Bob" href="#"><span>Poke Bob</span></a></li>
    </ul>
</div>

CSS

.secondary_control ul {
  margin: 0;
  display: table;
  height: 58px;
  position: absolute;
  right: 30px;
  top: 0;
}
.secondary_control ul li {
  list-style: none;
  display: table-cell;
  vertical-align: middle;
  padding-left: 15px;
  font-size: 1.2em;
}
.secondary_control ul li a {
  padding: 10px 15px;
  background: blue;
  color: #fff;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-radius: 5px 5px 5px 5px;
}

@media screen and (max-width: 800px) {

  .secondary_control
  ul li a span {
    display: none;
  }
}

的jQuery

$(window).resize(function(){    
if ($(".secondary_control ul li a span").css("display") == "none" ){
    $('.smart-nav li a').attr('class', $(this).data('tip'));
}
});

工作示例： http://jsfiddle.net/d3KQu/4/

尝试调整窗口大小，直到媒体查询启动。您将注意到跨度已隐藏且文本已删除。但是，data-attribute未作为类应用。任何人都可以指出什么是错的，或者如何改进。非常感谢。

更新感谢下面几个人的帮助，我现在得到了：

onResize = function() {
    if ($(".secondary_control ul li a span").is(":visible")){
        $('.smarter-nav li a').each(function(){ //loop through each
            if ($(this).hasClass("tooltip")){ // check if class is applied
                $(this).removeClass("tooltip"); //remove as :visible means screen is full width
            }
        });
    }
    else{
        $('.smarter-nav li a').each(function(){ //loop
            $(this).addClass($(this).attr('data-tip')); //add tooltip class
        });
    }
}//end function

任何能够改善这一点，提高效率或纠正任何错误的人，请告诉我。我很想学习。我已经把它变成了一个函数和创建if语句来检查是否在调整大小时应用了类，所以我可以不断检查span是否：可见，何时不确定是否正在应用该类。当窗口较大时，跨度可见，if语句应再次删除该类。

Answer 1

您的代码错误，您正试图从错误的元素中获取数据（data('tip')）：

$('.smart-nav li a').attr('class', $(this).data('tip'));

代码中的

$(this)为$(window)。

将您的代码更改为：

$(window).resize(function () {
    if ($(".secondary_control ul li a span").css("display") == "none") {
        $('.smart-nav li a').each(function(){
            $(this).addClass($(this).attr('data-tip'));
        });
    }
});

Answer 2

以下是您的函数的简化版本，它将根据跨度的可见性在data-tip属性中添加或删除该类：

onResize = function() {
    var addClass = !$(".secondary_control ul li a span").is(":visible")
    $('.smart-nav li a').each(function(){
        $(this).toggleClass($(this).data('tip'),addClass);
    });
}

<强> Demo fiddle

请注意，演示使用data-class作为属性，因为我发现更容易设置一些CSS类来测试它

jQuery if div display：none然后获取data-attribute并应用为class

2 个答案: