0

ええと、私は自分のulのすべてのliにクラスを追加したかったのですが、なぜそれが機能しないのかわかりません。

私のCSSコード：

.vnav-menu li.selected {
    background:#fff;
}

これが私のhtmlコードです。

<ul class="vnav-menu">  <!-- Initiates Showing/Hiding Dashboard Containers -->
    <li onclick="vnav_function('current_offer');"   id="current_offer_li"   class="selected">   <a> CURRENT OFFERS  </a></li>
    <li onclick="vnav_function('draft_offer');"     id="draft_offer_li">                        <a> DRAFT OFFERS    </a></li>
    <li onclick="vnav_function('expired_offer');"   id="expired_offer_li">                      <a> EXPIRED OFFERS  </a></li>
    <li onclick="vnav_function('offer_code');"      id="offer_code_li">                         <a> OFFER CODE      </a></li>
    <li onclick="vnav_function('title');"           id="title_li">                              <a> TITLE           </a></li>
    <li onclick="vnav_function('schedule');"        id="schedule_li">                           <a> SCHEDULE        </a></li>
    <li onclick="vnav_function('offer_type');"      id="offer_type_li">                         <a> OFFER TYPE      </a></li>
</ul>

そして、これが関数vnav_function（）の私のコードです

function vnav_function(data) {  //Showing/Hiding Dashboard Containers
    $('.vnav-menu li').each(function(i)
    {
       $(this).attr('id').addClass("selected");
    });
}

まあ、どういうわけかそれは動作しません。このようなもののためのアイデアはありますか？

4

5 に答える 5

2

.attr('id')文字列を返します。比較のためにIDを使用したいと思います。

if ($(this).attr('id') == $(data.target).attr('id') {
    $(this).addClass('selected');
}

ただし、それを行う方がはるかに簡単です

function vnav_function(data) {
    $(this).addClass('selected');
}

...そしてそれはさらに簡単になります

<ul class="vnav-menu">  <!-- Initiates Showing/Hiding Dashboard Containers -->
    <li id="current_offer_li"   class="selected">   <a> CURRENT OFFERS  </a></li>
    <li id="draft_offer_li">                        <a> DRAFT OFFERS    </a></li>
    <li id="expired_offer_li">                      <a> EXPIRED OFFERS  </a></li>
    <li id="offer_code_li">                         <a> OFFER CODE      </a></li>
    <li id="title_li">                              <a> TITLE           </a></li>
    <li id="schedule_li">                           <a> SCHEDULE        </a></li>
    <li id="offer_type_li">                         <a> OFFER TYPE      </a></li>
</ul>

$(".vnav-menu li").on('click', function () {
    $(this).addClass('selected');
});

あなたもしたいかもしれません：

$(".vnav-menu li").on('click', function () {
    $(".vnav-menu").removeClass('selected');
    $(this).addClass('selected');
});
于 2013-02-20T04:34:07.050 に答える
1

addClassによって返された文字列に対してメソッドを呼び出そうとしています$(this).attr('id')。によって返されるjQueryコレクションでaddClassメソッドを使用してみてください$(this)：

$(this).addClass("selected");
于 2013-02-20T04:31:33.877 に答える
1

jQueryなし：

function getElementsByCSSSelector(s) {
    return Array.prototype.slice.call(document.querySelectorAll(s));
}

getElementsByCSSSelector('.vnav-menu li').forEach(function(li) {
    li.classList.add("selected");
});
于 2013-02-20T04:42:21.200 に答える
0 
function vnav_function(data) {  //Showing/Hiding Dashboard Containers
  $('.vnav-menu li').each(function()
  {
     $(this).addClass("selected");
  });
 }

あるいは単に：

function vnav_function(data) {  //Showing/Hiding Dashboard Containers
   $('.vnav-menu li').addClass('extra');
}
于 2013-02-20T04:32:21.497 に答える
0

.each代わりに使用する必要はありませんこれはすべての内部$('.vnav-menu li').addClass('extra');に追加できますclassliul.vnav-menu

于 2013-02-20T04:35:33.627 に答える