CODEWITHSUNDEEP
jquery
emmm
emmm

Reputation: 1

jQuery if/else statement, remove id

I have a new problem to the existing script: Got the if/else to work and displace #id correctly. Now I want to add one more condition to check if the date is expired. My sample in jsfiddle works, somehow it didn't work in my actual staging site, the #id that suppose to display appear for a couple of seconds and then disappear. Here is the jsfiddle sample

Yes, I have jQuery included in the page.

Appreciate if any experts here could help me out.

===========

I am totally new to jQuery, appreciate if you could help me on the following: I have the following tags in a page. How do I remove #normal and show only #special or vise versa using if else statement if the page detects this attribute [href="/my/categories/happy] on document.ready

<div class="pane-content">
  <ul>
    <li class="taxonomy-term-reference-0"><a href="/my/categories/sad"> Sad</a>, <a href="/my/categories/happy">Happy</a>, <a href="/my/categories/joyful">Joyful</a>
    </li>
  </ul>
</div>

<div id="normal ">
  <h4>Normal</h4>
</div>

<div id="special ">
  <h4>Special</h4>
</div>

Upvotes: 0

Views: 1088

Answers (2)

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

Try with this..

if ($('a[href="/my/categories/happy"]').length) {
    $('#normal').remove();
} else {
    $('#special').remove();
}


$(document).ready(function() {
  console.log('Spacific href found', $('a[href="/my/categories/happy"]').length == 1 ? true : false)
  if ($('a[href="/my/categories/happy"]').length) {
    $('#normal').remove();
  } else {
    $('#special').remove();
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane-content">
  <ul>
    <li class="taxonomy-term-reference-0"><a href="/my/categories/sad"> Sad</a>, <a href="/my/categories/happy">Happy</a>, <a href="/my/categories/joyful">Joyful</a>
    </li>
  </ul>
</div>

<div id="normal">
  <h4>Normal</h4>
</div>

<div id="special">
  <h4>Special</h4>
</div>

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115242

Do it with toggle() method and attribute equals selector.

var ln = $('[href="/my/categories/happy"]').length === 0;

$('#normal').toggle(ln);
$('#special').toggle(!ln);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane-content">
  <ul>
    <li class="taxonomy-term-reference-0"><a href="/my/categories/sad"> Sad</a>, <a href="/my/categories/happy">Happy</a>, <a href="/my/categories/joyful">Joyful</a>
    </li>
  </ul>
</div>

<div id="normal">
  <h4>Normal</h4>
</div>

<div id="special">
  <h4>Special</h4>
</div>

Upvotes: 1

Related Questions