如何动态添加到父 div 的链接

Question

在下面的我的 sn-p 中，你会看到一个蓝色和红色的块。红色表示未完成特定职责。我试图为这些未完成的职责做的是动态地使其外部 div（其中一个#account-unfinished-package, #account-unfinished-logo）充当链接。

我不确定如何动态执行此操作，因为职责（块）将从未完成/已完成更改。我不希望完成的块有链接，否则我只会将它添加到 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>

Answer 1

使用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/