0

動的に生成されたhtmlコードがいくつかあります。

<div id="slider-7238" class="hps-slide" style="width:250px; height:50px;">
    <div class="hps-sliderText">
        Custom Pizza<br />
        Left: Mushrooms / Green Peppers<br/>Right: Cheese<span class="slide-more" id="slide-more-7238"> MORE... </span>
            <div class="slide-full-desc" id="slide-desc-7238">Left: Mushrooms / Green Peppers<br/>Right: Ultimate Cheese</div>                           
    </div>
</div>

<div id="slider-3471" class="hps-slide" style="width:250px; height:50px;">
    <div class="hps-sliderText">
        Chicken Alfredo<br />
        Grilled chicken breast strips and rotini pasta oven-baked<span class="slide-more" id="slide-more-3471"> MORE... </span>
            <div class="slide-full-desc" id="slide-desc-3471">Grilled chicken breast strips and rotini pasta oven-baked in a creamy Alfredo sauce with a layer of melted cheese. Served with an order of breadsticks.</div>                                    
    </div>
</div>

<div id="slider-7261" class="hps-slide" style="width:250px; height:50px;">
    <div class="hps-sliderText">
        Custom Pizza<br />
        Left: Ham<br/>Right: Cheese
    </div>
</div>

これらのチャンクはいくつあってもかまいませんが、それらに関連付けられているID番号はわかりません。slide-moreスパンを取得してマウスオーバーツールチップに変換するjavascript関数があり、 slide-full-descdivのコンテンツがツールチップのコンテンツになっています。使用するdividをハードコーディングすると、関数は正しく機能しますが、動的に生成されるため、これを実行できません。.each関数で使用しようとしていますが、セレクターを正しく取得できないようです。エラーは発生していません。すべてが機能しているわけではありません。

現状のコードは次のとおりです。

 $(document).ready( function() {
        $('span.slide-more').each(function (i) {
            new QoTooltip($(this), $('slide-full-desc').html(), {'layout':'top'});
        });
    });

QoTooltipのパラメータは、マウスオーバーする要素、ツールチップコンテンツを含む要素、およびいくつかの設定（この場合はレイアウトのみ）です。

必要なのは、関数に新しいQoTooltipを各スパンに適用させ、関連するslide-full-descdivのコンテンツを渡すことです。それらは、IDに付けられた4桁の番号によって関連付けられます（つまり、 divspan id="slide-more-3471"のhtmlを取得する必要があります。slide-desc-3471

マウスオーバーは機能するので、少なくともスパンで.eachを取得していますが、2番目のパラメーターに正しいコンテンツを取得する方法がわかりません。

4

2 に答える 2

1

このようにしてみてください

$('span.slide-more').each(function (i) {
    new QoTooltip($(this), $(this).next('.slide-full-desc').html(), {'layout':'top'});
});
于 2012-12-05T16:57:06.163 に答える
1

これを試して

$(this).next('.slide-full-desc').html();

完全なコード

$(document).ready( function() {
      $('span.slide-more').each(function (i) {
          var $this = $(this);
          new QoTooltip($this, $this.next('.slide-full-desc').html()
                                                             , {'layout':'top'});
      });
 });
于 2012-12-05T16:57:20.050 に答える