views:

145

answers:

2

HI all,

I am just starting to use jquery, I need to do something that I am not sure is possible. I know to use if statements on jquery is like normal javascript but I dont know how to use the jquery selectors on a normal if statement.

The function its currently working, but I am having two problems which I don't know how to fix, (I would assume that it would be with a if statement, but don't know how).

One problem is that, on container1 this function should not be applied, only with the two images, maximize and minimize should I be able to show and hide this.

Second problem is that the images are meant to show (when maximize is clicked) and hide (when minimize is clicked) the container below, but the function I have conflict with the maximize and minimize functions (which are normal javascript and I would like to make the jquery).

I hope its well explained. Please let me know if you have any questions.

The code would be the following.

   <html>
    <head>
            <script type="text/javascript">
     $(document).ready(function(){
      $(".Header").click(function(){
      $(this).next(" .container").slideToggle("fast");
      });
       });
             </script>
    </head>
    <body>
     <table class="Header">
      <tr>
       <td>header1</td>
       <td><img alt="minimize" onclick="funtion to minimise container1"/>
        <img alt="maximize" onclick="funtion to maximize container1" /></td>
      </tr>
     <table>
     <div class="container>**Container1**</div>
     <table class="Header">
      <tr>
       <td>**header2**</td>
       <td><img alt="minimize" onclick="funtion to minimise container2"/>
       <img alt="maximize" onclick="funtion to maximize container2" /></td>
      </tr>
     <table>
     <div class="container>**Container2**</div>
     <table class="Header">
      <tr>
       <td>**header3**</td>
       <td><img alt="minimize" onclick="funtion to minimise container3"/>
       <img alt="maximize" onclick="funtion to maximize container3" /></td>
      </tr>
     <table>
     <div class="container>**Container3**</div>
    </body>
   </html>
+1  A: 

How about this:

$(function() {
    $(".Header:not(#Container1)").click(function(){
        var c = $(this).next(".container");
        c.slideToggle("fast");
    });
    $(".Header:not(#Container1)").toggle(
        function(){ $(this).next(".container").next("img").css('display', 'block'); },
        function(){ $(this).next(".container").next("img").css('display', 'none'); }
    );
});
Konrad Garus
Thanks, that was pretty close, although I the conflict between the slideToggle and the display:block and none still exist. when the container is (display:block) and you click maximize, it would do (slideToggle) to show container again, although it is showing already, same thing with minimize.Thanks a lot anyway as it is very close to what I need it.
Cesar Lopez
I see. In this case, maybe this can help:$(".Header:not(#Container1)").click(function(){ var c = $(this).next(".container"); c.css('display', 'none'); c.slideToggle("fast", function() { c.css('display', 'block'); }); });
Konrad Garus
+1  A: 

About selectors in if statements, you just use them like normal. The only thing to be aware of is what they return.

if ( $('#thing') )

will return true if #thing exists.

if ( $('#thing').hasClass('stuff') )

will return true if #thing.stuff is there.

if ( $('#thing').text() == "Phil")

has the jQuery returning whatever the text for #thing is, and comparing it to 'Phil'.

And so on. Just think of what you're grabbing hold of with jQuery, and use accordingly. The docs are helpful.

D_N
Thank you for the explanation, it really help me to understand how to use selectors and if statements. :-)
Cesar Lopez
Glad to help. :)
D_N