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