0

私は次のコードを持っています:

<div id="mainMenuInternalMyProfile" class="mainMenuInternalTab" data-pagename="myprofile">
  <div class="mainMenuInternalTabClickable">&nbsp;</div>
    <h4 class="mainMenuInternalTitle">MY PROFILE</h4>
    <img src="images/main-menu-divider.png" class="mainMenuBackGroundDivider" alt="Dating Internal Menu Background Divider">
    <img src="images/main-menu-selected.png" class="mainMenuBackSelected mainMenuBackSelectedOption" alt="Dating Internal Menu Selected">
  </div>

最初の行では、行を見ることができますdata-pagename="myprofile"。私は、このようなさまざまなdata-pagename値を持つコードの HTML チャックをいくつか持っています。

一致するデータ値を見つけて手元にある必要があります。同じ 'home' または 'myprofile' を使用してから、CSS を変更します。私は次のことを試しました：

var element = $('div.mainMenuInternalTab').find("[data-pagename='" + urlType + "']");
element.css({'color': '#000000','z-index':'100'});

何が間違っているのかわかりません。

このような要素を使用できますか?

私は find on を使用しています$('div.mainMenuInternalTab')が、これらのクラスがいくつかあります。ID で上位の DIV を使用する必要がありますか?

どんなアドバイスも素晴らしいでしょう - 必要に応じてより多くの情報を提供できます。

4

3 に答える 3

1

多分これ 

$('div.mainMenuInternalTab').each(function() {
  var element = $(this).find("[data-pagename='" + urlType + "']");
  element.css({'color': '#000000','z-index':'100'});
}

または、おそらく色と zIndex のクラス名を作成します。

element.toggleclass("black");

アップデート

div を見つけて、同じ div で data-pagename を探していることに気付きました。

$('div[data-pagename="' + urlType + '"]').each(function() {
  $(this).css({'color': '#000000','z-index':'100'});
}

または多分

$('div[data-pagename="' + urlType + '"]').css({'color': '#000000','z-index':'100'});
于 2012-10-17T05:57:20.220 に答える
0

.find（）メソッドが正しく適用されていません。代わりにこれを試してください：

HTML

<div id="mainMenuInternalMyProfile" class="mainMenuInternalTab" data-pagename="example1">
    <div class="mainMenuInternalTabClickable">&nbsp;</div>
    <h4 class="mainMenuInternalTitle">MY PROFILE</h4>
    <img src="images/main-menu-divider.png" class="mainMenuBackGroundDivider" alt="Dating Internal Menu Background Divider">
    <img src="images/main-menu-selected.png" class="mainMenuBackSelected mainMenuBackSelectedOption" alt="Dating Internal Menu Selected">
</div>

<div id="mainMenuInternalMyProfile" class="mainMenuInternalTab" data-pagename="example2">
    <div class="mainMenuInternalTabClickable">&nbsp;</div>
    <h4 class="mainMenuInternalTitle">MY PROFILE</h4>
    <img src="images/main-menu-divider.png" class="mainMenuBackGroundDivider" alt="Dating Internal Menu Background Divider">
    <img src="images/main-menu-selected.png" class="mainMenuBackSelected mainMenuBackSelectedOption" alt="Dating Internal Menu Selected">
</div>

jQuery

$(document).ready(function() {
    $(".mainMenuInternalTab").each(function() {
        var _this = $(this);
        var pageName = _this.data("pagename");
        var urltype1 = "example1";
        var urltype2 = "example2";
        if (pageName === urltype1) {
            _this.css({
                "font-size": "5px"
            })
        } else if (pageName === urltype2){
           _this.css({
                "font-size": "25px"
           })
        }
    });
});

上記のjQueryでは、基本的にすべてのインスタンスを実行し、それらの属性を変数に.mainMenuInternalTab格納しています。data-pagenameその後、保存されたデータ属性の値に基づいて基本的に正しいスタイルを割り当てる単純な条件ステートメントを作成しました。

私の作業例はここjsFiddleにあります。

于 2012-10-17T06:35:47.593 に答える
0

これを試して

element = $('div.mainMenuInternalTab[data-pagename="' + urlType + '"]');

また

element = $('div.mainMenuInternalTab').filter('[data-pagename="' + urlType + '"]');

) を使用.find(すると、 div の子である要素が検索されます。

しかし、データ属性は問題の div 用です。だから略して

セレクターをチェーンすることもできます

 $('div.mainMenuInternalTab').filter('[data-pagename="' + urlType + '"]')
     .css({'color': '#000000','z-index':'100'});
于 2012-10-17T05:55:18.047 に答える