如何動態添加一個鏈接到父div

在我的代碼片段下面你會看到一個藍色和紅色的塊。紅色表示具體責任沒有完成。我爲這些未完成的任務所做的努力是動態地將其外部分區（其中一個#account-unfinished-package, #account-unfinished-logo）作爲鏈接。如何動態添加一個鏈接到父div

我不確定如何動態地做到這一點，因爲職責（塊）將從未完成/完成改變。我不希望完成的塊有鏈接，否則我只是將它添加到HTML。

有沒有人有任何想法，我可以如何使未完成塊的外部div作爲動態鏈接？

Here is a jsfiddle.

var unfinishedPack = 1; 
 
var unfinishedLogo = 0; 
 
if (unfinishedPack == 0) { 
 
    $('#account-unfinished-package').addClass('red'); 
 
    $('#unfinished-title-package').html('Product package needs setup.'); 
 
    $('#unfinished-img-package').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Package Needs Setup'>"); 
 
} 
 
else if (unfinishedPack > 0) { 
 
    $('#account-unfinished-package').addClass('blue'); 
 
    $('#unfinished-title-package').html('Product Package Setup Complete!'); 
 
    $('#unfinished-img-package').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Package Complete'>"); 
 
} 
 

 
if (unfinishedLogo == 0) { 
 
    $('#account-unfinished-logo').addClass('red'); 
 
    $('#unfinished-title-logo').html('Company logo needs added. <a href="#">Click to add</a>'); 
 
    $('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Logo Needs Added'>"); 
 
} 
 
else if (unfinishedPack > 0) { 
 
    $('#account-unfinished-logo').addClass('blue'); 
 
    $('#unfinished-title-logo').html('Account Logos Complete!'); 
 
    $('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Logo Complete'>"); 
 
}

#account-unfinished { 
 
    width: 100%; 
 
    height: auto; 
 
    /*color: #D8000C;*/ 
 
    /*background: #FFBABA;*/ 
 
    margin-bottom: 10px; 
 
    display: none; 
 
} 
 
#account-unfinished.block { 
 
    display: block; 
 
} 
 
#account-unfinished-package, #account-unfinished-logo { 
 
    width: 50%; 
 
    height: 100%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
#account-unfinished-package.red, #account-unfinished-logo.red { 
 
    background: #D8000C; 
 
    height: 100%; 
 
} 
 
#account-unfinished-package.blue, #account-unfinished-logo.blue { 
 
    background: #09afdf; 
 
    height: 100%; 
 
} 
 
.account-unfinished-inner { 
 
    padding: 15px; 
 
} 
 
.account-unfinished-title { 
 
    font-size: 1.5rem; 
 
    color: #FFF; 
 
    font-family: 'Lato', sans-serif; 
 
    line-height: 1.4em; 
 
    text-align: center; 
 
} 
 
.account-unfinished-title a { 
 
    color: #FFF; 
 
} 
 
#unfinished-img-package, #unfinished-img-logo { 
 
    margin: 10px auto; 
 
    display: block; 
 
    text-align: center; 
 
} 
 
.unfinished-img { 
 
    height: 50px; 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="account-unfinished-package"> 
 
    <div class="account-unfinished-inner"> 
 
    <p class="account-unfinished-title" id="unfinished-title-package"></p> 
 
    <div id="unfinished-img-package"></div> 
 
    </div> 
 
</div><div id="account-unfinished-logo"> 
 
    <div class="account-unfinished-inner"> 
 
    <p class="account-unfinished-title" id="unfinished-title-logo"></p> 
 
    <div id="unfinished-img-logo"></div> 
 
    </div> 
 
</div>

來源

2017-06-20 Paul

所以基本上你想換行「未完成」帶有''元素的塊，當它們「完成」時 - 解包它們？ – Catalyst

@Catalyst是的，正好。 – Paul

使用wrapInner功能：

if (unfinishedLogo == 0) { 
    $('#account-unfinished-logo').addClass('red'); 
    $('#account-unfinished-logo').wrapInner('<a href="https://google.com"></a>'); 
    $('#unfinished-title-logo').html('Company logo needs added. <a href="#">Click to add</a>'); 
    $('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Logo Needs Added'>"); 
} 
else if (unfinishedPack > 0) { 
    $('#account-unfinished-logo').addClass('blue'); 
    $('#unfinished-title-logo').html('Account Logos Complete!'); 
    $('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Logo Complete'>"); 
}

我給你做一個小提琴：https://jsfiddle.net/4mLjdee5/

來源

2017-06-20 15:53:11 mjw

謝謝！你知道爲什麼當我更改完成的變量時徽標框消失了嗎？ ...像這樣...'var unfinishedPack = 0; var unfinishedLogo = 1;'1 – Paul

是的，你有一個副本麪食的錯誤。檢查我的更新，我在上面的代碼中也是這樣 - 'else if（unfinishedPack> 0）{'should be'（unfinishedLogo> 0）{'https://jsfiddle.net/4mLjdee5/1/ – mjw

謝謝。沒有看到那個錯誤。我感謝幫助！ – Paul

如何動態添加一個鏈接到父div

回答

相關問題