0

一連の要素があり、それぞれが次のようになります。

<div class="maindiv">
  <div id="55">
    <a class="aimg" onclick="showit(this);return false;">
      <img src="myjpg.jpg"/>
    </a>
    <div class="someclass"></div>
    <div class="getit"></div>
  </div>
 </div>

クラス「getit」の表示は「none」に設定されています。その「getit」クラスのdivの表示を「ブロック」するには、「onclick = show」関数が必要です。

「showit()」関数内で次のことを試しました。

$(this).parent().find('.getit:first').css('display', 'block');

しかし、それは機能しません...

ここの誰かが私を助けてくれることを願っています！

4

4 に答える 4

1

通常、インライン JavaScript は最適な解決策ではないため、onclick ハンドラを削除し、代わりにクリック ハンドラのデフォルト アクションを防止します。

<div class="maindiv">
  <div id="55">
    <a class="aimg">
      <img src="myjpg.jpg"/>
    </a>
    <div class="someclass"></div>
    <div class="getit">dsdadsa</div>
  </div>
</div>​​​

次に、適切なクラスの兄弟を見つけて表示します。

$(".aimg")​.on('click', function(e) {
    e.preventDefault();
    $(this).siblings(".getit").show();
})​;​

フィドル

または、onclick関数が必要な場合（これは不必要です）：

<div class="maindiv">
  <div id="55">
    <a class="aimg" onclick="showit(this);return false;">
      <img src="myjpg.jpg"/>
    </a>
    <div class="someclass"></div>
    <div class="getit">dsdadsa</div>
  </div>
 </div>

​&lt;script type="text/javascript"​​​​​​​​​​​​​​​​​​​​​​​​​​&gt;
    function showit(elem) {
        $(elem).siblings(".getit").show();
    }
</script>
于 2012-07-22T20:01:35.250 に答える
1

this関数内では、タグshowitではなくウィンドウ オブジェクトを表します。<a>

show 関数の宣言で使用されているパラメーター名を使用します。

function showit(element){
    //other stuff
    $(element).parent().find('.getit:first').css('display', 'block');
    //other stuff
}

また

function showit(){
    //other stuff
    $(arguments[0]).parent().find('.getit:first').css('display', 'block');
    //other stuff
}

関数を変更せずにタグthisとして使用するには、呼び出すことができます<a>showit

<a class="aimg" onclick="showit.call(this);return false;">

また、属性をいじる必要なく、イベントハンドラーを要素にバインドすることもできます

$(".aimg")​.on('click', function() {
    //other stuff
    $(this).siblings(".getit").css('display', 'block');
    //other stuff
})​;​
于 2012-07-22T20:08:13.677 に答える
0

このようにしてください： -

HTML:

<div class="maindiv">
  <div id="55">
    <a class="aimg">
      <img src="http://www.gravatar.com/avatar/cfda66988653015c6791d5da11ebbc2c?s=32&d=identicon&r=PG"/>
    </a>
    <div class="someclass"></div>
    <div class="getit"></div>
  </div>
 </div>​

JS:

$('.aimg').one('click', function() {
    $(this).parent().find('.getit:first').css('display', 'block');
});

CSS:

.getit {
    display: none;
    border: 1px solid;
    width: 50px;
    height: 50px;
}​

ライブデモを参照

于 2012-07-22T20:01:18.103 に答える
0

links 親要素でdiv.getitusing the関数を見つけます。要素.find()。<div id="55">

ここで重要なのは、着信イベント オブジェクト ( e) をラップして jQuery オブジェクトに変換し、jQuery の便利な機能$()を使用できるようにすることです。.parent().find()

function showit(e){
  $(e).parent().find('div.getit').show();
};

jQueryのドキュメントには、関数について次.show()のように書かれています-

一致した要素は、アニメーションなしですぐに表示されます。.css('display', 'block')これは、表示プロパティが最初の状態に復元されることを除いて、 の呼び出しとほぼ同じです。要素の表示値が の場合、非表示inlineにしてから表示すると、再びインラインで表示されます。

注:!importantなどのスタイルでを使用する場合は、正しく機能させるためにdisplay: none !important使用するスタイルをオーバーライドする必要があります。 .css('display', 'block !important').show()

于 2012-07-22T19:51:42.770 に答える