Question

我的其他声明有问题..它似乎没有被执行..我想要的是如果我点击按钮“dissapear”所有段落与“Boe”消失，但如果我点击它再次出现了。但我的其他声明似乎不起作用，与“更改”按钮相同，如果我点击“更改”，我的文本格式化自己，但如果我再次点击它，它会恢复正常。有帮助吗？谢谢！

<!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>

Answer 1

只需使用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>

Answer 2

试试这个：

 <!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>

Answer 3

问题是你的if语句总是为true，因为它是针对错误的属性而不是来自CSS的属性。以下代码对我来说很合适：

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

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

}else{

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

}

希望有所帮助：）

Answer 4

＆＃13;

$(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"
      });

    }

  });

});

＆＃13;

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

＆＃13;

jQuery else语句不起作用

4 个答案: