0

我正在尝试使用 jquery 来检测屏幕调整大小，然后如果我span被隐藏，则触发一个事件以获取 adata-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/

尝试调整窗口大小，直到媒体查询开始。您会注意到跨度被隐藏并且文本被删除。但是，数据属性并未作为一个类应用。任何人都可以指出什么是错的，或者如何改进。非常感谢。

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

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 是否为：可见以及何时不确定是否应用了该类。当窗口较大时，span 是可见的，if 语句应该再次删除该类。

4

2 回答 2

1

这是您的函数的简化版本，它将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);
    });
}

演示小提琴

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

于 2013-08-20T08:34:51.073 回答
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'));
        });
    }
});
于 2013-08-19T14:58:46.847 回答