Jquery if statements, selectors
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 don't 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="function to minimise container1"/>
<img alt="maximize" onclick="function to maximize container1" /></td>
</tr>
<table>
<div class="container>**Container1**</div>
<table class="Header">
<tr>
<td>**header2**</td>
<td><img alt="minimize" onclick="function to minimise container2"/>
<img alt="maximize" onclick="function to maximize container2" /></td>
开发者_如何学运维 </tr>
<table>
<div class="container>**Container2**</div>
<table class="Header">
<tr>
<td>**header3**</td>
<td><img alt="minimize" onclick="function to minimise container3"/>
<img alt="maximize" onclick="function to maximize container3" /></td>
</tr>
<table>
<div class="container>**Container3**</div>
</body>
</html>
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'); }
);
});
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.
加载中,请稍侯......
精彩评论