0

Jquery を使用して、 hidden からツールチップをレンダリングします<span>。私がしていることは、各<span>値をjavascript変数に保存してから、これらの変数をこのようにツールチップに追加することですAppendTo tooltip(var1+var2+var3+etc..)

私の問題は、表示されるコンテンツの一部の間に段落スペース (パディング) を作成する必要があることです。ツールチップに var1 と var2 しか表示されないことがあります (var3 と var4 は空です)。

間隔については、実際にpadding-bottomは var2 で css を使用しています。したがって、var3 が空でない場合はスペースが必要ですが、var3 が空の場合は不要なスペースができます。

var2 の後に何らかのコンテンツがあると確信している場合にのみ、スペースを追加する方法を見つけようとしています。何かのカウンターを考えています。お気に入り

if var1 not empty counter++
if var2 not empty counter++
if var3 not empty counter++
If counter > 2 var2 = var2 + space

しかし、多分あなたたちはもっと良い考えを持っています:)

私のコードの下：

<script>
first_name = '';
last_name = '';
phone = '';
email = '';
address = '';
tip_first_name = '';
tip_last_name = '';
tip_phone = '';
tip_email = '';
tip_address = '';

first_name = $(this).children('span[class=p_first_name]').attr("data-tooltip");
    if(first_name != null)tip_first_name = '<span class="tooltip_first_name">'+first_name+'</span>';
last_name = $(this).children('span[class=p_last_name]').attr("data-tooltip");
    if(last_name != null)tip_last_name = '<span class="tooltip_last_name">'+last_name+'</span>';
phone = $(this).children('span[class=p_phone]').attr("data-tooltip");
    if(phone != null)tip_phone = '<span class="tooltip_phone">'+phone+'</span>';
email = $(this).children('span[class=p_email]').attr("data-tooltip");
    if(email != null)tip_email = '<span class="tooltip_email">'+email+'</span>';
address = $(this).children('span[class=p_address]').attr("data-tooltip");
    if(address != null)tip_address = '<span class="tooltip_address">'+address+'</span>';

$('#hint').before('<div id="tip" class="tip"><div class="tip-personn">'+tip_first_name+tip_last_name+tip_phone+tip_email+tip_address+'</div></div>');

</script>
<style>
.tooltip_last_name{
    padding-bottom:10px;
}

4

1 に答える 1

1

この JSFiddleは問題を解決する必要があります。css 隣接兄弟セレクター (以下を参照) を使用するため、2 番目、3 番目、4 番目 (など) のスパンをターゲットにします。

div.tip span + span {
     padding-top: 10px;
}

兄弟セレクターと子セレクターの詳細については、こちらをご覧ください

于 2013-08-02T20:22:57.923 に答える