2017-09-06 13 views
0

ページ上の一連のツールチップに動的に生成されたコンテンツを使用しようとしています。Jquery UIのツールヒント - コンテンツにパラメータを渡す

ツールチップtriggerstargetsは(私がツールチップとして表示したいHTMLコンテンツを含む)triggers置かインラインとtargetsで、CMSによって生成されたページのふもとに隠されたdivの内側にあります。

データ・タグ(data-referencenumberlinksdata-referencenumbertargets)のペアを使用して、それぞれのトリガーとターゲットの関係を識別し、各タイプを索引で実行して、そのペアの固有の数値参照を生成します。

これまでのところとても良いです。 (data-referencenumberlinks)のインデックス番号をツールヒント関数のcontent:オプションに渡す方法を理解できません(私はthisContentという名前のvarを使用しています(現在は "1"にハードコードされています)。私は、アクティブなツールチップのdata-referencenumberlinksが含まれており、ツールチップを可能にする変数を作成する必要がありますどのように任意の体のアドバイスをすることができます -

$(this).attr('data-referencenumberlinks', index); 

、これの様々なバージョンが、成功せず:。私はthisContentを設定しようとした例

対応するものを表示するにはdata-referencenumbertargets

ありがとう。

JS:

$(document).ready(function(){ 

    $('.tooltipFramework').each(function (i, obj) { 
     index = $('.tooltipFramework').index(this); 
     $(this).attr('data-referencenumbertargets', index); 
    }); 

    $('.tooltipTrigger').each(function (i, obj) { 
     index = $('.tooltipTrigger').index(this); 
     $(this).attr('data-referencenumberlinks', index); 
    });  
    var thisContent = 1; 
    $('.tooltipTrigger').tooltip({   
     content: $('[data-referencenumbertargets="' + thisContent + '"]') 
    }); 
}); 

答えて

0

ああ - 修正のためにしようとする典型的な支出日、数分後にそれを自分で解決する方法を実現し、その後、stackoverflowの時に専門家を頼みます! - とにかく

$(this).tooltip({ content: $('[data-referencenumbertargets="' + index + '"]') }); 

おかげでみんな

$('.tooltipTrigger').each(function (i, obj) { 
    index = $('.tooltipTrigger').index(this); 
    $(this).attr('data-referencenumberlinks', index); 
    console.log('index is ' + index); 
    $(this).tooltip({ content: $('[data-referencenumbertargets="' + index + '"]') }); 
}); 

効果指標の段階で、各要素に対してツールチップを実行している:参照用

は、私はこのアプローチを使用していました。

関連する問題