親divにリンクを動的に追加する方法

Question

下のスニペットで、青と赤のブロックが表示されます。赤は、特定の義務が完了していないことを示しています。私が未完成のこれらの任務のためにやろうとしているのは、その外側のdiv（これらのうちの1つ）をリンクとして機能させることです。

義務（ブロック）が未完/終了から変更されるため、これを動的に行う方法がわかりません。完成したブロックにリンクをつけたくない、そうでなければ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/