jquery - can't get the elements to fadeOut / fadeIn

Question

I've wrote this code in order to replace the text regarding the img they are clicking. I can't understand why my code isn't executing, I looked it over and over again. I hope someone can find my mistake :(

This is the jQuery code:

$(document).ready(function() {
            $('#text-1').fadeIn(500);
            //click event
            $('.img').click(function() {
                var currentId = $(this).attr('id');
                alert(currentId);
                if (currentId===3) {
                    $('#text-3').fadeIn('fast');
                    $('#text-2, #text-1').css('display', 'none');
                } else if (currentId===2) {
                    $('#text-2').fadeIn('fast');
                    $('#text-1, #text-3').css('display', 'none');
                } else if (currentId===1) {
                    $('#text-2').fadeIn('fast');
                    $('#text-1, #text-3').css('display', 'none');
                }
            });
        });

and this is the HTML:

<div>
        <div id="icon">
            <a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
            <a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
            <a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
        </div>
        <div id="text">
            <div id="text-1" class="textbox">
                <h2>1</h2>
                <p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
            <div id="text-2" class="textbox">
                <h2>2</h2>
                <p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
            </div>
            <div id="text-3" class="textbox">
                <h2>3</h2>
                <p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
            </div>
        </div>
    </div>

Please help!!!! Thanks

Answer 1

Problem is in your condition checking

instead of using such that

currentId===3 // checks that currentId is numeric 3

Use

currentId=='3' //changed === to ==, check that currentId is string type 3

And one more thing, after clicking a your page is redirecting, so if you want to prevent this, use preventDeault or put # in your href .

Answer 2

HTML

<div>
   <div id="icon">
            <a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
            <a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
            <a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
        </div>
        <div id="text">
            <div id="text-1" class="textbox">
                <h2>1</h2>
                <p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
            <div id="text-2" class="textbox">
                <h2>2</h2>
                <p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
            </div>
            <div id="text-3" class="textbox">
                <h2>3</h2>
                <p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
            </div>
        </div>
    </div>

JS

$(document).ready(function() {
            $('#text-1').fadeIn(500);
            //click event
            $('.img').click(function() {
                var currentId = $(this).attr('id');
                alert(currentId);
                if (currentId==3) {
                    $('#text-3').fadeIn('fast');
                    $('#text-2, #text-1').css('display', 'none');
                } else if (currentId==2) {
                    $('#text-2').fadeIn('fast');
                    $('#text-1, #text-3').css('display', 'none');
                } else if (currentId==1) {
                    $('#text-2').fadeIn('fast');
                    $('#text-1, #text-3').css('display', 'none');
                }
            });
        });

WORKING LINK http://jsbin.com/heseforaxe/1/edit?html,js,output

Answer 3

var currentId = $(this).attr('id');

All the value of attributes is string ,not number. so,you can change like this.

currentId==="3";

or

currentId==3;

Answer 4

1. currentId===3 this should be changed to currentId==3 because the returned id is string
2. because there is a post back when clicking the link you need to add ref="#" to the a tag
3. there are missing closing tags on div id='text-1' and the main div
4. you can find a working copy of this from this url " http://jsfiddle.net/t3L1fkuh/6/ " (i have removed the images because 2 of them does not load).

.textbox{
     display: none;    
   }

the above class is added so that it adds the fade in effect on page load