Paul Paul - 3 days ago 4
Javascript Question

How to dynamically add a link to a parent div

In my snippet below you will see a blue and red block. The red is indicating that a specific duty is not completed. What I am trying to do for these unfinished duties is dynamically make its outer div (one of these

#account-unfinished-package, #account-unfinished-logo
) to act as a link.

I am unsure of how to do this dynamically, since the duties (blocks) will be changing from unfinished/finished. I do not want the finished blocks to have links, or else I would just add it to the html.

Does anyone have any ideas of how I can make the outer divs for the unfinished blocks act as a link dynamically?

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>




mjw mjw
Answer

Use the wrapInner function:

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'>");
}

I made you a fiddle: https://jsfiddle.net/4mLjdee5/