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 号永远是未知的。我有一个 javascript 函数，它采用slide-more跨度并将它们转换为鼠标悬停工具提示，其中slide-full-descdiv 的内容作为工具提示内容。如果我在要使用的 div id 中硬编码，则该函数可以正常工作，但由于动态生成，我不能这样做。我正在尝试在 .each 函数中使用它，但似乎无法正确选择选择器。我没有收到任何错误；它只是不是所有的工作。

这是它的代码：

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

QoTooltip 的参数是鼠标悬停的元素、包含工具提示内容的元素和一些设置（在这种情况下，只是布局。）

我需要的是让函数对每个跨度应用一个新的 QoTooltip 并传入相关的 slide-full-desc div 的内容。它们通过附在其 ID 上的四位数字相关联（即span id="slide-more-3471"需要获取slide-desc-3471div 的 html。

鼠标悬停工作，所以它至少在跨度上得到 .each ，但我不确定如何将正确的内容放入第二个参数中。

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 回答