jQuery else 문이 작동하지 않습니다.

내 else 문에 문제가 있습니다. 실행되지 않는 것 같습니다. 원하는 항목은 "dissapear"버튼을 클릭하면 "Boe "dissapears,하지만 다시 클릭하면 다시 나타납니다. 하지만 내 else 문은 "변경"버튼을 사용하여 동일하게 작동하는 것처럼 보입니다. "변경"을 클릭하면 텍스트 형식 자체가 나타나지만 다시 한 번 클릭하면 정상으로 돌아갑니다. 어떤 도움이 필요합니까? 고맙습니다!jQuery else 문이 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("table").css("border","solid black 4px"); 
     $("#dissapear").click(function(){ 
      if ($(".boe:visible")) { 
       $(".boe").hide(1000); 
      } else { 
       ($(".boe:visible")) 
      } 
     }); 

     $("#change").click(function(){ 
      if ($(".hoera").css("color","black")) { 
       $(".hoera").css({"color":"green","font-size":"40px","text-decoration":"underline"}); 
       $(".boe").css({"color":"green","font-size":"40px","text-decoration":"underline"}); 
      } else { 
       $(".hoera").css({"color":"black","text-decoration":"none","font-size":"19px"}); 
       $(".boe").css({"color":"black","text-decoration":"none","font-size":"19px"}); 
      } 
     }); 

    }); 
</script> 
</head> 
<div id="tabel"> 
    <table> 
     <td> <button id="dissapear">Dissapear!</button> </td> 
     <td> <button id="change">Change!</button> </td> 
     <tr><td> <p class="boe">BOE!</p> </td> </tr> 
     <tr><td> <p class="hoera">Hoera!</p> </td> </tr> 

     <tr><td> <p class="boe">BOE!</p> </td> </tr> 
     <tr><td> <p class="hoera">Hoera!</p> </td> </tr> 

     <tr><td> <p class="boe">BOE!</p> </td></tr> 
     <tr><td> <p class="hoera">Hoera!</p> </td></tr> 

     <tr><td> <p class="boe">BOE!</p> </td> </tr> 
     <tr><td> <p class="hoera">Hoera!</p></td> </tr> 

     <tr><td> <p class="boe">BOE!</p> </td> </tr> 
     </tr> 
    </table> 
</div> 
</body> 
</html>

출처

2017-03-14 KoyaCho

도움이되기를 바랍니다. '($ (". boe : visible"))'는 아무것도 유용하지 않습니다. – trincot

당신이 실제로 부르는 기능이 무엇인지 더 자세히 읽어야한다고 생각합니다. 또 다른 의심스러운 줄 :'if ($ (". hoera") .css ("color", "black"))'는 색상을 검정색으로 변경하고 jQuery 객체를 반환하며 항상 true입니다. http://api.jquery.com/ –

숨기기/표시하려면 toggle()을 사용하십시오. 현재 색상을 비교하려면 $(".hoera:first-child").css("color") == "rgb(0, 0, 0)"을 입력하십시오.

는 여기에 대답 :

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("table").css("border","solid black 4px"); 
     $("#dissapear").click(function(){ 
      $(".boe").toggle(1000); 
     }); 

     $("#change").click(function(){ 
      if ($(".hoera:first-child").css("color") == "rgb(0, 0, 0)") { 
       $(".hoera").css({"color":"green","font-size":"40px","text-decoration":"underline"}); 
       $(".boe").css({"color":"green","font-size":"40px","text-decoration":"underline"}); 
      } else { 
       $(".hoera").css({"color":"black","text-decoration":"none","font-size":"19px"}); 
       $(".boe").css({"color":"black","text-decoration":"none","font-size":"19px"}); 
      } 
     }); 
    }); 
</script> 
</head> 
<div id="tabel"> 
    <table> 
     <td> <button id="dissapear">Dissapear!</button> </td> 
     <td> <button id="change">Change!</button> </td> 
     <tr><td> <p class="boe">BOE!</p> </td> </tr> 
     <tr><td> <p class="hoera">Hoera!</p> </td> </tr> 

     <tr><td> <p class="boe">BOE!</p> </td> </tr> 
     <tr><td> <p class="hoera">Hoera!</p> </td> </tr> 

     <tr><td> <p class="boe">BOE!</p> </td></tr> 
     <tr><td> <p class="hoera">Hoera!</p> </td></tr> 

     <tr><td> <p class="boe">BOE!</p> </td> </tr> 
     <tr><td> <p class="hoera">Hoera!</p></td> </tr> 

     <tr><td> <p class="boe">BOE!</p> </td> </tr> 
     </tr> 
    </table> 
</div> 
</body> 
</html>

출처

2017-03-14 21:47:07

감사합니다! 그러나 "첫 아이"가 필요한 이유는 무엇입니까? 내가 그것을 제거하고 그것 없이는 잘 작동, 어떻게합니까? 무슨 뜻이에요? 고맙습니다! – KoyaCho

반드시 그렇지는 않습니다. 'class '를 사용하여 여러 요소를 선택할 것이므로 클래스'hoera'의 특정 첫 번째 자식을 가져 오기 위해 배치했습니다. 참조 용으로 [CSS Selectors Reference] (https://www.w3schools.com/cssref/css_selectors.asp) –

이 시도 :

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$("table").css("border","solid black 4px"); 

$("#dissapear").click(function(){ 

if ($(".boe").is(":visible")) 
    { 

      $(".boe").hide(1000); 

    } 
    else 
    { 
    $(".boe").show(); 
    } 

}); 



$("#change").click(function() 
{ 
    if ($(".hoera").css("color","black")) 
    { 

     $(".hoera").css({"color":"green","font-size":"40px","text-decoration":"underline"}); 
      $(".boe").css({"color":"green","font-size":"40px","text-decoration":"underline"}); 

    } 


     else 
     { 
     $(".hoera").css({"color":"black","text-decoration":"none","font-size":"19px"}); 
     $(".boe").css({"color":"black","text-decoration":"none","font-size":"19px"}); 

     } 

}); 





}); 
</script> 
</head> 
<div id="tabel"> 
<table> 
<td> <button id="dissapear">Dissapear!</button> </td> 
<td> <button id="change">Change!</button> </td> 
<tr><td> <p class="boe">BOE!</p> </td> </tr> 
<tr><td> <p class="hoera">Hoera!</p> </td> </tr> 

<tr><td> <p class="boe">BOE!</p> </td> </tr> 
<tr><td> <p class="hoera">Hoera!</p> </td> </tr> 

<tr><td> <p class="boe">BOE!</p> </td></tr> 
<tr><td> <p class="hoera">Hoera!</p> </td></tr> 

<tr><td> <p class="boe">BOE!</p> </td> </tr> 
<tr><td> <p class="hoera">Hoera!</p></td> </tr> 

<tr><td> <p class="boe">BOE!</p> </td> </tr> 

</tr> 
</table> 

</div> 
</body> 
</html>

출처

2017-03-14 21:48:07 pooyan

문제는 당신의 대신 CSS에서 하나를 잘못 속성을 목표로하고 있기 때문에 문은 항상 참이됩니다. 다음 코드는 나를 위해 잘 작동합니다 :

if ($(".boe").css("display") != "none"){ 

    $(".boe").hide(1000); 
    $("#dissapear").text("Appear!"); 

}else{ 

    $(".boe").show(1000); 
    $("#disapear").text("Disapear!"); 

}

는 jQuery를 명령문이없는 :)

출처

2017-03-14 21:53:55 glauber

$(document).ready(function() { 
 
    $("table").css("border", "solid black 4px"); 
 

 
    $("#dissapear").click(function() { 
 

 
    var boes = $('.boe').filter(function() { 
 
     return $(this).css('display') == 'none'; 
 
    }) 
 

 
    if (boes.length == 0) { 
 
     $(".boe").hide(1000); 
 
    } else { 
 
     $(".boe").show(1000) 
 
    } 
 
    }); 
 

 
    $("#change").click(function() { 
 
    var hoeras = $('.hoera').filter(function() { 
 
     return $(this).css('color') == 'rgb(0, 0, 0)'; 
 
    }) 
 

 
    if (hoeras.length > 0) { 
 
     $(".hoera").css({ 
 
     "color": "green", 
 
     "font-size": "40px", 
 
     "text-decoration": "underline" 
 
     }); 
 
     $(".boe").css({ 
 
     "color": "green", 
 
     "font-size": "40px", 
 
     "text-decoration": "underline" 
 
     }); 
 

 
    } else { 
 
     $(".hoera").css({ 
 
     "color": "black", 
 
     "text-decoration": "none", 
 
     "font-size": "19px" 
 
     }); 
 
     $(".boe").css({ 
 
     "color": "black", 
 
     "text-decoration": "none", 
 
     "font-size": "19px" 
 
     }); 
 

 
    } 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="tabel"> 
 
    <table> 
 
    <td> <button id="dissapear">Dissapear!</button> </td> 
 
    <td> <button id="change">Change!</button> </td> 
 
    <tr> 
 
     <td> 
 
     <p class="boe">BOE!</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <p class="hoera">Hoera!</p> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <p class="boe">BOE!</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <p class="hoera">Hoera!</p> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <p class="boe">BOE!</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <p class="hoera">Hoera!</p> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <p class="boe">BOE!</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <p class="hoera">Hoera!</p> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <p class="boe">BOE!</p> 
 
     </td> 
 
    </tr> 
 

 
    </tr> 
 
    </table> 
 

 
</div>

출처

2017-03-14 21:58:14 larz

jQuery else 문이 작동하지 않습니다.

답변

관련 문제