My objective is to have the lds-roller div only displayed when the text within the anchor tag with the ID of searchFor is equal to _. This change in text should occur with an HTTP response.
<div class="lds-roller"><div></div><div></div><div>
</div><div></div><div></div><div></div><div></div>
<div></div></div>
<p>
<span class="r">
<span class="andom">
<a href="{% pageurl post %}#disqus_thread" id="searchFor"> _
</a>
</span>
</span>
</p>
The CSS for the lds-roller is outlined below.
.lds-roller {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
I've attempted various methods, but they either consistently show the div, fail to display it altogether, or make the div disappear before the text has even changed.
The JavaScript function typically follows a structure like this:
$(function () {
if ($("#searchFor").text() === "_")
{
$('.lds-roller').show();
}
else{
$('.lds-roller').hide();
}
})();