2010-03-01 3 views
1

Я только начинаю использовать jQuery, мне нужно сделать то, что я не уверен, что это возможно. Я знаю, что если инструкции jQuery похожи на обычный JavaScript, но я не знаю, как использовать селектора jQuery в нормальном if-выражении.JQuery if statements, selectors

Функция, работающая в данный момент, но у меня есть две проблемы, которые я не знаю, как исправить (я бы предположил, что это будет с выражением if, но не знаю, как это сделать).

Одна из проблем заключается в том, что на контейнере эту функцию нельзя применять только с двумя изображениями, максимизировать и минимизировать, если я смогу показать и скрыть это.

Вторая проблема заключается в том, что изображения предназначены для отображения (при нажатии на максимальный щелчок) и скрыть (при сведении к минимуму) контейнера ниже, но функция, с которой я сталкиваюсь с функциями максимизации и минимизации (которые являются нормальными JavaScript и Я хотел бы сделать jQuery).

Надеюсь, его хорошо объяснили. Пожалуйста, дай мне знать, если возникнут какие-либо вопросы.

Код будет следующим.

<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> 
+0

Как разбить это на два вопроса? Эти две проблемы совершенно разные, хотя они влияют на один и тот же код. –

+0

Извините, я не понимал, я возьму это к рассмотрению в следующий раз. – Amra

ответ

1

Как об этом:

$(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'); } 
    ); 
}); 
+0

Спасибо, это было довольно близко, хотя конфликт между слайдом и дисплеем: block и none все еще существуют. когда контейнер (дисплей: блок), и вы нажимаете кнопку «максимизировать», он сделал бы (slideToggle), чтобы снова отобразить контейнер, хотя он уже показывает, то же самое с минимизацией. Большое спасибо, так как он очень близок к тому, что мне нужно. – Amra

+0

Я вижу. В этом случае, возможно, это может помочь: $ (". Header: not (# Container1)"). Click (function() { var c = $ (this) .next (". Container"); c .css ('display', 'none'); c.slideToggle ("fast", function() { c.css ('display', 'block'); }); }); –

2

О селекторов в случае утверждения, вы просто использовать их как обычно. Единственное, что нужно знать, это то, что они возвращают.

if ($('#thing')) 

вернет true, если #thing существует.

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

вернет true, если #thing.stuff есть.

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

имеет JQuery возвращения независимо текст для #thing есть, и сравнивая его с «Фил».

И так далее. Просто подумайте о том, что вы хватаете с помощью jQuery и используете соответственно. Документы полезны.

+1

Благодарим вас за объяснение, это действительно поможет мне понять, как использовать селекторы и утверждения if. :-) – Amra

+1

Рад помочь. :) –