jQuery problem

by 4 replies
5
I have swapping div's. When I click the "#inactive" id, the "#active-page" should disappear and the "#inactive-page" should appear. Moreover, the "#active" id should become the "#inactive" id and vice versa. I have used swapping id's =>"#inactive-page-swap" with the qualities of "#inactive-page" and "#active-swap" with qualities of "#active".

THE PROBLEM IS - when I click the "#inactive" id, the "#active-page" disappears but the "#inactive-page" does not appear. :confused: :confused: :confused:

<script>
$(document).ready(function(){
$("#inactive").click(function(){
$("#inactive").attr("id","active-swap");
$("#active").attr("id","inactive");
$("#active-swap").attr("id","active");


$("#active-page").attr("id","inactive-page-swap",function(){
$("#inactive-page").attr("id","active-page");
$("#inactive-page-swap").attr("id","inactive-page");
});
});
});
</script>

Please help me!!!
#programming #jquery #problem
  • You're missing quotes around #inactive on the 3rd line of the script.

    Also, learn to indent your code correctly, and it will be much easier to read.
  • Beyond Brandon's comment, you're introducing all kinds of troubles when you try to swap IDs. You're running the js after the DOM has been built - you can rename the IDs, but the browser won't know it.

    I don't know exactly what you're trying to do, but it appears that you might be better off adding and removing classes if you're just trying to affect the appearance of the containers.
    • [ 1 ] Thanks

  • Man, on your explanations about activation-deactivation, you need the following lines:


    Code:
    <script>
$(document).ready(function(){
  $("#inactive").click(function(){
    $("#inactive").attr("id","active-swap");
    $("#active").attr("id","inactive");
    $("#active-swap").attr("id","active");
  });
});
</script>
    Why not using display or visibility CSS properties? This is easy, pretty logical and recommended by all tutorials. And it's all about appearance-disappearance.
    In case you cannot use the CSS properties, I'd use parent selectors.

    e.g.
    Code:
      $('#first-parent-selector').find("#inactive").attr("id","active");
  $('#second-parent-selector').find("#active").attr("id","inactive");
    your html code will look like
    Code:
    <div id="first-parent-selector">
  <div id="inactive">
  </div>
</div>
<div id="second-parent-selector">
  <div id="active">
  </div>
</div>

    This is more logical for jQuery than using a third party element.
  • Now this is really crap... changing ID's ...

    Go with classes, this is more compliant.

    Every ID has to be unique per page... classes don't have to.

    And if this is just for "design purposes" you chould just use addClass, removeClass or toggleClass with proper CSS.
Join the discussion

Next Topics on Trending Feed

  • 5

    jQuery problem

    I have swapping div's. When I click the "#inactive" id, the "#active-page" should disappear and the "#inactive-page" should appear. Moreover, the "#active" id should become the "#inactive" id and vice versa. I have used swapping id's =>"#inactive-page-swap" with the qualities of "#inactive-page" and "#active-swap" with qualities of "#active". THE PROBLEM IS - when I click the "#inactive" id, the "#active-page" disappears but the "#inactive-page" does not appear. :confused: :confused: :confused: