0

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/

メディア クエリが開始されるまで、ウィンドウのサイズを変更してみてください。スパンが非表示になり、テキストが削除されていることがわかります。ただし、データ属性はクラスとして適用されていません。誰が間違っているか、または改善する方法を指摘できますか。どうもありがとう。

更新 以下の何人かの人々からの助けのおかげで、私は今持っています：

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 ステートメントを作成しました。ウィンドウが大きくなると、スパンが表示され、if ステートメントは再びクラスを削除する必要があります。

4

2 に答える 2

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 に答える
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 に答える