условный оператор JavaScript с использованием && - PullRequest
Новая
       5

условный оператор JavaScript с использованием &&

1 голос
/ 07 июля 2011

Я пытаюсь изменить состояние кнопки, если для всех трех определенных элементов применен определенный класс.

Раньше я просто считал количество li с помощью класса complete, но теперь мне нужно быть более конкретным. 

$("#signUp li").click(function(){
    $(this).addClass("complete");
    //    if($("#signUp li.complete").length >= 3){

        if(  $ ( "#signUp li:first-child" && "#signUp li:nth-child(5)" && "#signUp li:nth-child(7)" ).hasClass( "complete" ) )
        {
        $("#done").addClass("active");
        };
    });

Я пробовал это и некоторые его варианты, но лучшим результатом было соответствие критериям, когда последний класс li установлен на "complete"

Я немного ковырялся, но не смог найти конкретный экземпляр, соответствующий моей ситуации.

Всегда спасибо за удивительные ответы, которые обучают и исправляют мои любительские способы.

Ответы [ 5 ]

2 голосов
/ 07 июля 2011

Ваш селектор Jquery недействителен, что вам действительно нужно сделать, это: 

$("#signUp li").click(function(){
    $(this).addClass("complete");

    if(
        $("#signUp li:first-child").hasClass("complete") &&
        $("#signUp li:nth-child(5)").hasClass("complete") &&
        $("#signUp li:nth-child(7)").hasClass("complete"))
    {
        $("#done").addClass("active");
    }
});

Ваш текущий код выполняется только тогда, когда последний селектор имеет класс, потому что строки оцениваются как логическая операция. Это означает, что выполняется следующее: 

"#signUp li:first-child" && "#signUp li:nth-child(5)" && "#signUp li:nth-child(7)"

Когда это оценивает true (что всегда происходит, потому что непустые строки имеют значение " truey "), оно просто возвращает последнее оцененное значение, которое будет "#signUp li:nth-child(7)", поэтому весь ваш оператор компилируется в: 

if($("#signUp li:nth-child(7)").hasClass("complete")) {
        $("#done").addClass("active");
    };
});
1 голос
/ 07 июля 2011

это: 

if(  $ ( "#signUp li:first-child" && "#signUp li:nth-child(5)" && "#signUp li:nth-child(7)" ).hasClass( "complete" ) )

должно быть следующим (улучшено): 

if(  $ ( "#signUp").find("li:first-child:not(.complete), li:nth-child(5):not(.complete), li:nth-child(7):not(.complete)" ).length == 3 )

"# signUp li: first-child" && "#signUp li: nth-child (5) "&&" #signUp li: nth-child (7) "

оценивается как true, так как && является логическим оператором.так что вы действительно делаете $ (true) .hasClass (...)

1 голос
/ 07 июля 2011

Как насчет того, чтобы просто сформулировать это так: 

        if( $("#signUp li:first-child").hasClass("complete")
              && $("#signUp li:nth-child(5)").hasClass("complete")
              && $("#signUp li:nth-child(7)").hasClass("complete") ){
          ... code
        }
0 голосов
/ 07 июля 2011

Уверен, что это неправильно, вы выполняете операцию && над строками, которая не даст ожидаемых результатов. Следующее, однако, будет работать. 

$ ( "#signUp li:first-child" ).hasClass("complete") 
    && $( "#signup li:nth-child(5)" ).hasClass("complete") 
    && $("#signup li:nth-child(7)" ).hasClass( "complete" )
0 голосов
/ 07 июля 2011

Используйте селектор not, чтобы узнать, не завершены ли они.

http://jsfiddle.net/

if ($("li:not(.complete)").length == 0) {}
...