CODEWITHSUNDEEP
jquerybutton
user1486934
user1486934

Reputation: 99

Change content in a div using button

I am trying to create three buttons that change the content inside of a div using jQuery.

I'm not sure whats wrong with this code.

<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>

<body>
    <script type="text/javascript">
    var buttons = $("#buttons").find("a");
        $("buttons").click(function() {
           var id = $(this).attribute("id");
           $("pages id").css("display", "none");
           $("pages id:eq("+id+")").css("display", "block");
    });
    </script>​​​​

    <div id="buttons">
         <a href="#" id="0" class="mybutton myred">Div 1</a>
         <a href="#" id="1" class="mybutton myblue">Div 2</a>
         <a href="#" id="2" class="mybutton myblue">Div 3</a>
    </div>

    <div id="pages">
        <div id="1" class="mydivshow">1111</div>
        <div id="2" class="mydivhide">2222</div>
        <div id="3" class="mydivhide">3333</div>
    </div>
</body>

Upvotes: 1

Views: 13971

Answers (4)

Hazem Salama
Hazem Salama

Reputation: 15111

You need to wrap your code inside a document.ready function. And there is not such a thing as attribute function, it is attr(). Also, you are selecting pages which is an Id, you need the # sign and the Id after it refers to the div, but you need to say so, otherwise jquery would be looking for an HTML element named id which does not exist.

You may also want to take advantage of the hide/show functions of jquery instead of all that css code

See working fiddle here

 var buttons = $("#buttons a");

    buttons.click(function(){
            var id = $(this).attr("id");
                $("#pages div").hide();
                $("#pages div:eq("+id+")").show();
        });

Upvotes: 3

Spencer Ruport
Spencer Ruport

Reputation: 35117

It looks like you've got a few misconceptions that need clearing up. Don't worry you're clearly on the right track.

First, you need to wrap your call inside a document.ready event like so.

<script type="text/javascript">
$(document).ready(function() {
    var buttons = $("#buttons").find("a");
        $("buttons").click(function() {
           var id = $(this).attr("id");
           $("pages id").css("display", "none");
           $("pages id:eq("+id+")").css("display", "block");
    });
});
</script>​​​​

The reason for this is because your HTML is rendered sequentially, that is, it reads it line by line. When your javascript code executes the HTML for the buttons hasn't been rendered yet so it has no idea what you are talking about. Also notice that the ready event handler is constructed almost identically to the click event handler. You're just operating on a different object and using a different event.

Next issue is that you seem to be struggling with how selectors work.

var buttons = $("#buttons").find("a");

You're actually using two selectors here. $() and .find() do almost the same exact thing. The jQuery object selector however is used to query the entire document and find is used to query a subset. So for what you're trying to do this would be more appropriate:

var buttons = $("a");

This simply says "select all anchor tags". When a selector does not start with a special character it is simply looking for tags of that type. The # character queries all elements with the id and the . character queries all elements of that class. So your first statement was actually querying for any elements with the id "buttons" which don't exist.

Lastly you don't need to create a var for what you're trying to do so for simplicity's sake we'll just get rid of that line and move on to the click handler.

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
       var id = $(this).attribute("id");
       $("pages id").css("display", "none");
       $("pages id:eq("+id+")").css("display", "block");
    });
});
</script>​​​​

The next issue is that you're using the ID attribute as a data field. Don't do this. If you need to store information about an element within it's tag use a custom attribute starting with the prefix "data-". So in this case lets change your anchor tags around.

<div id="buttons">
     <a href="#" data-id="0" class="mybutton myred">Div 1</a>
     <a href="#" data-id="1" class="mybutton myblue">Div 2</a>
     <a href="#" data-id="2" class="mybutton myblue">Div 3</a>
</div>

That's a little better. Now we've got the same issue on the divs. We could do the same thing but since we're going to be querying this information and using selectors on classes is much easier let's just give the divs classes according to the id.

<div id="pages">
    <div class="mydivshow div1">1111</div>
    <div class="mydivhide div2">2222</div>
    <div class="mydivhide div3">3333</div>
</div>

Now we can get back to the jQuery and change the code. 

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
       var id = $(this).attribute("data-id"); // Using a custom attribute.
       $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
       $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
    });
});
</script>​​​​

And that should do it!

Upvotes: 8

A.M.K
A.M.K

Reputation: 16795

You have multiple errors in your code, a reworked version would be as follows:

Demo: http://jsfiddle.net/SO_AMK/BcFVv/

jQuery: 

$("#buttons a").click(function() {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#pages div#" + id + "").css("display", "block");
});​

HTML: 

<div id="buttons">
    <a href="#" id="1" class="mybutton myred">Div 1</a>
    <a href="#" id="2" class="mybutton myblue">Div 2</a>
    <a href="#" id="3" class="mybutton myblue">Div 3</a>
</div>
<div id="pages">
    <div id="1" class="mydivshow">1111</div>
    <div id="2" class="mydivhide">2222</div>
    <div id="3" class="mydivhide">3333</div>
</div>

​

Upvotes: 4

Joe Enos
Joe Enos

Reputation: 40393

You're calling $("buttons") - that is attempting to find a tag named <buttons> which of course doesn't exist. You've already pre-calculated the link array, so you just need to call:

buttons.click(function() { ...

Upvotes: 1

Related Questions