工具提示中的javascript随机内容.如何在需要时添加空间

javascript random content in tooltip. How to add space when needed

本文关键字：空间 添加 javascript 随机 工具提示      更新时间：2023-09-26

我使用Jquery从隐藏的<span>中呈现工具提示。我所做的是将每个<span>值存储在javascript变量中，然后将这些变量附加到工具提示中，如AppendTo tooltip(var1+var2+var3+etc..)

我的问题是，我需要在显示的一些内容之间留出一个段落空间（填充）。有时我的工具提示只显示var1和var2（var3和var4为空）。

对于间距，我实际上在var2上使用css padding-bottom。因此，如果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;
}

这个JSFiddle应该可以解决您的问题，它使用了一个css相邻的同级选择器（如下所示），因此将针对第2、第3、第4（依此类推）跨度。

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

有关兄弟和子选择器的更多信息，请点击此处

相关文章：