0

この質問の初心者を許してください。私はこれを機能させるために何日もハッキングしてきました!

ここで私のフィドルをチェックしてください。

基本的に、サムネイル画像をクリックすると、ページの右側に大きな画像 (および情報) が表示される製品ビュー ページを設計しようとしています。繰り返されるコードはphpで動的に生成されます。

「prev」セレクターを使用してみましたが、表示したい div がリンクと同じ div を含んでいる場合 (大きな画像が正しく表示されない) でない限り、機能しないようです。prevAll を試してみましたが、それもうまくいきませんでした。リンクは、フィドルの例でモックアップした 2 つの div 内にネストされています。これは、これが物事に関係があると考えているためです。

HTML

 <div class="big_pic">
    <p>product 1</p>
</div>
<div class="div1">
  <div class="div2">
    <a href="javascript:void(0)" onClick="showContent(this)">Click for product 1</a>
  </div>
</div>

<div class="big_pic">
  <p>product 2</p>
</div>
<div class="div1">
  <div class="div2">
    <a href="javascript:void(0)" onClick="showContent(this)">Click for product 2</a>
  </div>
</div>

CSS

.big_pic {
  position: absolute;
  top: 50px;
  left: 0px;
  display: none;
  border: 1px black solid;
}

危険なJqerying！

function showContent(e) {
  $('.big_pic').hide('fast');
  $(e).prev('div.big_pic').show('slow');
}

この関数の背後にあるアイデアは、新しいものが表示される前に、以前に表示されたすべての div がクリアされるということです。

誰かが私のために流すことができる光を前もってありがとう!!

4

4 に答える 4

1

prev選択した要素の前の兄弟要素のみを選択します。最も近いa方法を使用して、ターゲット要素の兄弟である要素の祖父母を選択してからメソッドを使用できますprev。

function showContent(e) {
  $('.big_pic').hide('fast');
  $(e).closest('.div1').prev('div.big_pic').show('slow');
}

http://jsfiddle.net/yP4cz/

于 2013-01-16T21:00:48.127 に答える
0

'big_pic' divは、リンクと同じdivにある場合にのみ表示されると言っているのは正しいです。それがprevの仕組みです。前の兄弟に行きます。

必要なのは、.parent（）を使用してDOMを上に移動することです。したがって、HTMLで使用したJavaScriptは次のようになります。

function showContent(e) {
  $('.big_pic').hide('fast');
  $(e).parent().parent().prev('div.big_pic').show('slow');
}
于 2013-01-16T21:08:29.493 に答える
0

prev()前の兄弟を選択するため、「big_pic」を兄弟として選択するには、まず対応する「div1」に到達する必要があります。

eはリンクを表しているため、これを使用.parents()して、含まれている 'div1' を取得し、そこからprev()対応する 'big_pic' を取得するために使用できます。例えば：

$(e).parents('div.div1').prev('div.big_pic').show('slow');
于 2013-01-16T21:04:51.113 に答える
0

html の onclick なしで次のようなことを行います。

$(function(){
  $('.div2 a').on('click', function(){
    $(this).closest('.div1').prev('.big_pic').show('slow');
  });
});

jsfiddle: http://jsfiddle.net/x3cbZ/7/

于 2013-01-16T21:05:50.427 に答える