CODEWITHSUNDEEP
jquery
Michael
Michael

Reputation: 321

Problems with jQuery code

Another jQuery issue... I have tried this several times using "class" and "id" elements and I can not get it right. I am hoping the brains on stackoverflow can help!

The problem that I am having is when I open the page all of the elements are closed. When I click on one link all links open. I believe it closes correctly the problem is that when I open the first link all items open. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0     Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bid Items</title>
<link href="bid.css" rel="stylesheet" type="text/css" />
<script src="jquery/js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">


  $(document).ready(function(){ 
  $('#showhideconent').hide(); 
  $('a').click(function(){ 
  $('#showhideconent').show('slow'); 

}); 

 $('a#close').click(function(){ 
        $('#showhideconent').hide('slow'); 
}) 

}); 

 $(document).ready(function(){ 
 $('#showhideconent2').hide(); 
 $('a').click(function(){ 
 $('#showhideconent2').show('slow'); 

}); 

 $('a#close2').click(function(){ 
    $('#showhideconent2').hide('slow'); 
}) 

});  

  $(document).ready(function(){ 
  $('#showhideconent3').hide(); 
  $('a').click(function(){ 
 $('#showhideconent3').show('slow'); 

}); 

 $('a#close3').click(function(){ 
    $('#showhideconent3').hide('slow'); 
}) 

}); 
  $(document).ready(function(){ 
  $('#showhideconent4').hide(); 
  $('a').click(function(){ 
  $('#showhideconent4').show('slow'); 

}); 

 $('a#close4').click(function(){ 
        $('#showhideconent4').hide('slow'); 
}) 

}); 


</script>

</head>

<body class="oneColElsCtr" onload="MM_preloadImages('Assignment4b.jpg')">

<div id="container">
<div id="mainContent">

    <h1>Bid Page</h1>
<h1>Coke Memorbila</h1>




<a href="#" id="click">Amber Bottle 1914</a>
<div id="box" align="center">
<div id="showhideconent">
<p><a href="coke/Amber1914.shtml"><img src="amber1914.jpg" width="200" height="200"    alt="Amber Coke" /></a></p>
<p><a href="#" id="close">Close</a> </p>

</div>
</div>


<a href="#" id="click">Amber Bottle 1915</a>
<div id="box" align="center">
<div id="showhideconent2">
<p><a href="coke/Amber1915.shtml"><img src="coke/Amber1914.shtml" width="200" height="200" alt="Amber Bottle 1915" /></a></p>
<p><a href="#" id="close2">Close</a> </p>


</div>
</div>




<a href="#" id="click">Green 1929</a>
<div id="box" align="center">
<div id="showhideconent3">
<p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
<p><a href="#" id="close3">Close</a> </p>

</div>
</div>


<a href="#" id="click">1970s Cans</a>
<div id="box" align="center">
<div id="showhideconent4">
<p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
<p><a href="#" id="close4">Close</a> </p>


</div>
</div>
</body>
</html>

Upvotes: -1

Views: 99

Answers (3)

user113716
user113716

Reputation: 322462

Michael, see my answer from earlier when you asked about it.

I re-wrote your HTML and jQuery code to work.

Problems with show hide jquery

It is good that you're not reusing IDs anymore, but you don't need IDs to assign event handlers when you have consistent repetition like you have.

EDIT:

No offense, but it sounds like you just need to pick up a book on jQuery and read a few chapters. You'll be surprised how easy jQuery is to comprehend when you have a little guidance.

I didn't know any jQuery, but after reading a little bit of Learning jQuery I had a good grip on the basic concepts. It only took a couple hours of my time.

EDIT:

You can see the repetition here.

<a href="#" class="click">Green 1929</a>
<div class="box" align="center">
    <div class="showhideconent">
        <p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
        <p><a href="#" class="close">Close</a> </p>
    </div>
</div>

<a href="#" class="click">1970s Cans</a>
<div class="box" align="center">
    <div class="showhideconent">
        <p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
        <p><a href="#" class="close">Close</a> </p>
    </div>
</div>

First, I changed the a elements so that they have class="click" instead of id="click".

They are obviously intended to play a similar role, but on different content. Let's say that there are 20 such sections with a click class. I can assign an event handler to all twenty at once with:

$('.click').click(function() {
    // Do something.
});

But, of course, we want each one to only act on the content it is associated with. Also, we need to make sure we are working with the correct one that was clicked. To accomplish this, we use the this keyword. It refers to the element that received the event.

$('.click').click(function() {
    $(this) // Places the element that was clicked in a jQuery object.
    // Do something.
});

So now what do we do? Well, it looks like you wanted to use that to show the content. So we need to locate that link's associated content, and show it.

$('.click').click(function() {
    $(this).next().find('.showhidecontent').show();
    return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
});

This code almost explains itself. $(this) (the element we clicked) grabs the next() element (the one with class .box) then searches for an element with class .showhidecontent inside of it, then shows it.

You could do something similar with your .close button. It is even easier since it is inside the .showhidecontent element.

$('.close').click(function() {
    $(this).closest('.showhidecontent').hide();
    return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
});

This assigns the function to all elements with .close class. When clicked, the one that was clicked searches for the closest() parent with class .showhidecontent, and then hides it.

EDIT:

To put it all together, this code will assign the proper events to all the repeating sections, as long as you fix the classes. (You can pretty much ditch the IDs)

$(document).ready(function() {
    $('.showhidecontent').hide();  // Hide all the showhidecontent class elements

        // Assign click event handler to all .click class elements
    $('.click').click(function() {
        $(this).next().find('.showhidecontent').show();
        return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
    });

        // Assign click event handler to all .close class elements
    $('.close').click(function() {
        $(this).closest('.showhidecontent').hide();
        return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
    });
});

Hope this helps. jQuery is designed to be very readable, but you need to learn the basics first (just like in anything you do).

Upvotes: 5

Ben
Ben

Reputation: 16533

First, IDs are unique, you can't have two identical IDs (Well, you can but you shouldn't). Second, you don't need several $(document).ready(function(){ });, one is enough. And finally, solving your issue, this $('a').click(function(){ }); will bind the click() event to every single a tag you have.

Try something like:

<a href="#" id="click-3">Green 1929</a>
<div id="box" align="center">
    <div id="showhideconent3">
        <p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
        <p><a href="#" id="close3">Close</a> </p>
    </div>
</div>

<a href="#" id="click-4">1970s Cans</a>
<div id="box" align="center">
    <div id="showhideconent4">
        <p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
        <p><a href="#" id="close4">Close</a> </p>
    </div>
</div>

And:

$(document).ready(function(){ 
    $('#showhideconent-3, #showhideconent-4').hide();
    $('#click-3').click(function(){ 
        $('#showhideconent-3').show('slow');
    }
    $('#click-4').click(function(){ 
        $('#showhideconent-4').show('slow');
    }
});

Upvotes: 0

Dean Harding
Dean Harding

Reputation: 72648

The problem is that $("a") returns all <a> elements on the page. So you effectively bind your "show" function to every link. When the event fires, jQuery simply fires each handler in turn and all your contents get shown.

What you've got is actually pretty inefficient (in terms of code duplication) you can do it with much less code like this. Assuming this is your HTML:

<a href="#" class="click">Amber Bottle 1914</a> 
<div class="showhideconent"> 
  <p><a href="coke/Amber1914.shtml"><img src="amber1914.jpg" width="200" height="200"    alt="Amber Coke" /></a></p> 
  <p><a href="#" id="close">Close</a> </p> 
</div> 

<a href="#" class="click">Amber Bottle 1915</a> 
<div class="showhideconent"> 
  <p><a href="coke/Amber1915.shtml"><img src="coke/Amber1914.shtml" width="200" height="200" alt="Amber Bottle 1915" /></a></p> 
  <p><a href="#" id="close2">Close</a> </p> 
</div> 

<a href="#" class="click">Green 1929</a> 
<div class="showhideconent"> 
  <p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p> 
  <p><a href="#" id="close3">Close</a> </p> 
</div> 

<a href="#" class="click">1970s Cans</a> 
<div class="showhideconent"> 
  <p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p> 
  <p><a href="#" id="close4">Close</a> </p>
</div>

Note that you cannot have multiple elements with the same ID, so I've changed a couple of your IDs to classes. I've simplified it a little, so you might have to add some thing back if it's required for styling. Now you can use the following javascript:

$(function() {

  $("a.click").click(function() {
    // this will be called whenever a <a class="click"> link is clicked
    // 'this' will refer to the actual <a> tag itself so we can use that to
    // find the next <div class="showhidecontent"> to show/hide
    $(this).next(".showhidecontent").toggle("slow");
  });

});

This code will register a "click" handler with each <a class="click"> tag that, when clicked will toggle the next "showhidecontent" element in the document.

Upvotes: 0

Related Questions