根據內部值切換p標簽的顯示

Question

我認為這應該不太難解決，但是對於Javascript或JQuery，我幾乎是一個新手。

HTML：

<p><span id="AddLine1Summary"></span>,</p>
<p><span id="AddLine2Summary"></span>,</p>
<p><span id="TownCitySummary"></span>,</p>
<p><span id="CountySummary"></span>,</p>
<p><span id="PostcodeSummary"></span></p>

當客戶未填寫地址行2時，仍然存在值"," ，因此在摘要頁面中，它看起來像這樣：

12 Bob Street,
,
BOLTON,
Lancashire,
BL1 1AC

因此<p><span id="AddLine2Summary"></span>,</p>當客戶將此空白留空時，我試圖消除整行<p><span id="AddLine2Summary"></span>,</p> 。 到目前為止，我已經嘗試過了：

<script>
$(document).ready(function () {

if ($('#AddLine2Summary:contains(",")').length == 1) {
    $("#AddLine2Summary").parent().hide();
}

});
</script>

parent.hide因為我必須隱藏整個<p>而不僅僅是<span>

Answer 1

除了檢查“。”的長度外，您還可以檢查跨度內具有ID AddLine2Summary的文本。 如果為空，則可以放置隱藏父代的代碼。

它應該看起來像：

if ($('#AddLine2Summary').is(':empty')) {
    $("#AddLine2Summary").parent().hide();
}

Answer 2

首先，嘗試將HTML代碼段包裝在容器中，以使選擇更加容易：

<div class="address-container">
    <p><span id="AddLine1Summary"></span>,</p>
    <p><span id="AddLine2Summary"></span>,</p>
    <p><span id="TownCitySummary"></span>,</p>
    <p><span id="CountySummary"></span>,</p>
    <p><span id="PostcodeSummary"></span></p>
</div>

然后在jQuery中，在此處查找空的span元素，並隱藏其父p 。

$('.address-container span:empty').closest('p').hide();

小提琴的例子

然后，這將適用於所有空地址字段，而不僅僅是#AddLine2Summary 。