Question

上下文：我正在使用MDL Framework，正在尝试创建一个表单系统，用户在其中输入一点数据，然后淡出该页面，然后淡入下一页。这对于第一和第二个效果很好。该按钮可以正常工作（控制台输出所请求的信息等），并且计数器将增加。面板不会像预期的那样出现或消失。

$(".btnSubmit").click(function() {
  $("#" + card).hide();
  $("#apptBack").hide();
  $("#cardBack").show();
  // $("#3").show(); // #3 used instead of # + card to test if card variable was the issue. This is the only space (when uncommented) that this card appears.
  
  if (card != 3) {
    if (card == 0) { //Needs different checking (check all boxes are ticked to continue) Old code, but too much like effort to take out
      var cont = true;
      $(".check").each(function() {
        if (this.checked) {

        } else {
          cont = false;
        }
      });
      if (cont == false) { //All boxes aren't ticked
        console.log("AHHHH");
        $("#failed").fadeIn();
        $("#emergBack").show();
      } else {
        card++ //They all are so next card
        //Get Clipboard group and then who to see
        // $(".btnSubmit").attr('disabled', 'true'); // This has been enabled to prevent further clicking - disabled currently for testing.
        $(".cardBack").show();
      }
    } else //Card isn't 1 so it can be a standard method
      if (card == 1) { //For first card
        see = $("#see").find(":selected").text();
        seeID = $("#see").find(":selected").attr('id');
        console.log(see);
        console.log(seeID);

        console.log("Chosen: " + seeID);
        if (!see) { //No value
          console.log("Nope");
          //Fade in current card (as a reject sort of way) or next if the card number has advanced
        } else { //Value, next card!
          card++;
          //Get Types before next card
          getTypes(); //getTypes contains a $("#" + card).show at the end. (This seems to work)
        }
      }
    else if (card == 2) { //Card 2
      type = $("#type").find(":selected").text();
      console.info(type);
      if (!type) { //No Value
        console.log("Nope");
        $("#" + card).fadeIn();
        //Fade in current card (as a reject sort of way) or next if the card number has advanced
      } else { //Value so next card
        card++;
        //$("#3").show(); // Doesn't seem to work when placed here?
        console.log(card);
        getDesc(); // This calls a function that pretty much just contains $("#3").show();
        // Used just to see if it's the fact that the other two .show/fadeIn when in their own function. - This doesn't make it appear either.
      }
    }

  } else { //Cards 1 and 2 have been checked. Now we can check the desc and if all good, move on to appt finding
    //	$("#"+ card).hide();
    //	$("#3").hide(); // This doesn't actually make  the card hidden when it's uncommented.
    desc = $("#desc").val(); //Get the last card's content (the description)

    if (desc == "") { //If empty
      console.log("Nope");
      $("#" + 3).fadeIn();
      //Fade it back in to show reject
    } else { //Has content!
      //Hide what's left, show the calendar
      console.log(desc);
      //	$("#3").hide(); // same issue here.
      $("#price").hide();
      $("#cal").fadeIn(); // This does work though, but #3 will not hide.
      // $("#showCal").fadeIn();
      console.log("Who? " + see + " Type? " + type + " Desc? " + desc);
      getTimeslots();
      $(".cardBack").hide();
    }
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

https://jsfiddle.net/xpvt214o/826602/

fadeIn / Out / Hide / Show是否存在已知问题，或者我的逻辑在某个地方不正确？

Answer 1

我仍然不确定这个问题，我不确定这是命名惯例还是.hide .show问题，无论哪种方式；

function hide3() {
var x = document.getElementById("3c");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}
}

我用它来修复它，并更改了div的名称，这有点烦人，因为这意味着我不得不手动解决它，而不是使用$（“＃” + x）;。

fadeIn / fadeOut / hide / show JQuery问题

1 个答案: