logo标签列表

根据条件改变文本颜色

jquerycss
3

我希望根据条件语句更改文本颜色。基于对测验答案的某些组合，我希望文本颜色更改为绿色、黄色或红色。

我已经阅读了在线文章（使用.css），但这些文章仅将这些颜色应用于divs。我有一个div，在其中打印我的结果，因此我不确定如何将其与JQuery的.text属性结合起来。

我还是JQuery的新手，所以任何关于此的帮助都对我很有帮助。

抱歉代码很长，但这是我能正确呈现它的唯一方式。

* {
    box-sizing: border-box;
    background-color: #bf2e1a;
}
header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 100px;
    margin-left: 650px;
    margin-right: 650px;
    margin-top: 150px;
    text-align: center;
    font-size: 60px;
    border-width: 5px;
}

div#main-content {
    margin-top: 100px;
}

div#disclaimer {
    width: 800px;
    height: 100px;
    height: 500px;
    margin: 0 auto;
    margin-top: 200px;
    background: #EFDFBC;
}

div#get-justice {
    position: relative;
    top: 30px;
    padding-top: 10px;
    background-color: #EFDFBC;
    margin: 0 auto;
    width: 600px;
    height: 600px;
}
div#get-justice p {
    background-color: #EFDFBC;
    color: red;
    padding: 40px 40px 4px 40px;
    font-size: 28px;
}
div#get-justice button {
    background-color: red;
    border: none;
    color: white;
    margin-top: 120px;
    padding: 20px 37px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 21px;
    cursor: pointer;
}
h3 {
    background: #EFDFBC;
    text-align: center;
    color: red;
    font-size: 23px;
    padding-top: 25px;
}
div#first-question {
   text-align: center;
}

ul {
    columns: 2;
    background: #EFDFBC;
 text-align: -webkit-left;
}
li {
    text-align: -webkit-match-parent;
    background: #EFDFBC;
    display: block;
    padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-one-no {
    display: none;
    margin: 11px;
}
label#oneYes {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#oneNo {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-two-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-two-no {
    display: none;
    margin: 11px;
}
label#twoYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#twoNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-three-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-three-no {
    display: none;
    margin: 11px;
}

label#threeYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
/*label#threeYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/
input#quiz-question-four-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-four-no {
    display: none;
    margin: 11px;
}

label#fourYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}

/*
label#fourYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/
input#quiz-question-five-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-five-no {
    display: none;
    margin: 11px;
}

label#fiveYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}

/*
label#fiveYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/

.clientinfo{
 height:445px;
    background-color: #EFDFBC;
}

p {
    background-color: #EFDFBC;
    font-size: 23px;
    margin: 0 auto;
    padding: 10px 0px 1px 70px;
}

input[type="text"] {
    background-color: white;
    padding: 4px 0px 0px 10px;
    margin: 0px 0px 0px 70px;
}

button {
    display: block;
    margin: 0 auto;
    padding: 25px 35px 20px 25px;
    font-size: 35px;
    margin-top: 45px;
    color: #EFDFBC;
}

button#start {
    display: block;
    margin: 0 auto;
    width: 200px;
    padding: 25px 35px 20px 25px;
    font-size: 35px;
    margin-top: -272px;
    margin-right: 68px;
}

hr {
    width: 165px;
    padding: 1px 0px 0px 0px;
}

div#disclaimer {
    width: 800px;
    padding: 27px 10px 10px 0px;
}

div#questionOneBody {
    background: #EFDFBC;
}
div#questionTwoBody {
    background: #EFDFBC;
}
div#questionThreeBody {
    background: #EFDFBC;
}
div#questionFourBody {
    background: #EFDFBC;
}
div#questionFiveBody {
    background: #EFDFBC;
}
h1 {
    /* padding: 20px 4px 20px; */
    text-align: center;
    margin-top: 25px;
}
/*
h1 {
    //background: #EFDFBC;
    padding: 20px 4px 20px;
    text-align: center;
}
*/

h1#disclaimerHeader{
 background: #EFDFBC;
    padding: 20px 4px 20px;
    text-align: center;
}

p {
    background-color: #EFDFBC;
    font-size: 23px;
    margin: 0 auto;
    padding: 1px 0px 0px 20px;
}

div#disc-container {
    width: 450px;
    background: #EFDFBC;
    padding: 10px 10px 14px 10px;
    border-style: solid;
    border-color: red;
    border-width: 10px;
    margin-left: 20px;
}

a#disclaimerLink {
    text-decoration: none;
}


/*.hideHeader{
 display:none;
}*/

p#greenText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: green;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}
p#yellowText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: yellow;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}
p#redText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: red;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}

div#questionHeader {
    height: 140px;
    color: #EFDFBC;
    border-style: solid;
    margin-top: 163px;
    font-size: 28px;
    border-width: 10px;
}

/*div#resultHeader {
    margin-top: 163px;
    font-size: 28px;
    border-width: 10px;
}

div#resultHeader {
    height: 140px;
    color: #EFDFBC;
    border-style: solid;
    margin-bottom: 10px;
    font-size: 28px;
    border-width: 10px;
}*/

div#resultHeader {
    color: #EFDFBC;
    border-style: solid;
    margin-bottom: 10px;
    margin-left: 110px;
    width: 1170px;
    font-size: 28px;
    border-width: 10px;
}

div#quizResult {
    font-size: 20px;
    /* width: 650px; */
    margin: 0 auto;
    background: #EFDFBC;
    height: 600px;
    margin-top: 10px;
}

div#allResult {
    margin: 0 auto;
    margin-left: -350px;
    margin-right: -350px;
    /* background: #EFDFBC; */
}

div#leftResult {
    background: #EFDFBC;
    width: 610px;
}

div#result {
    background: #EFDFBC;
    height: 634px;
    font-size: 26px;
    width: 450px;
    margin-left: 110px;
    padding: 75px 45px 0px 70px;
}

hr#eligibleHr {
    position: absolute;
    margin-top: 57px;
    width: 300px;
    margin-left: 182px;
}

div#calenderToolSideText {
    background: #EFDFBC;
    /* width: 300px; */
    margin-left: 551px;
    margin-bottom: -18px;
    margin-top: -334px;
    padding: 0px 68px 0px 0px;
}

div#rightSide {
    background: #EFDFBC;
    margin-left: 480px;
    margin-top: -659px;
    height: 634px;
    width: 800px;
}

div#rightSide h1 {

    text-align: center;
    margin-top: 25px;
    margin-right: 24px;
    background: #EFDFBC;
    color: red;
    padding: 18px 10px 10px 10px;
}

hr#consultationHR {
    width: 595px;
    margin-right: 77px;
    margin-top: -29px;
}

div#calenderTool {
    background: blue;
    width: 400px;
    height: 330px;
    margin-top: 25px;
    margin-left: 148px;
}

hr#endingHR {
    width: 495px;
    margin-top: 25px;
    color: red;
    width: 597px;
    margin-right: 76px;
    margin-top: 25px;
}

h3#shareQuiz {
    margin-right: 380px;
    margin-top: -9px;
}

p#rightsidePara {
    margin-left: 131px;
    margin-top: -12px;
    color: red;
}

p#rightsideParaTwo {
    margin-left: 136px;
    color: red;
}

h1#eligibleHeader {
    position: absolute;
    margin-left: 180px;
    margin-top: 20px;
    background: #EFDFBC;
    color: red;
}

.verticalLine {
    width: 2px;
    height: 570px;
    position: absolute;
    margin-left: 591px;
    margin-top: -615px;
}


.bkr-header{
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 600px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}
.hidden {
    display: none;
}
.visible {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 445px;
    background: #EFDFBC;
}
.visible2 {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 165px;
    background: #EFDFBC;
}

.visible4 {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 195px;
    background: #EFDFBC;
}

.visibleHeader {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 650px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}

.page {
 display: none;
}

.page.active {
    display: block;
    margin: 0 auto;
    width: 650px;
}

.questions {
    margin: 0px auto;
    width: 650px;
    height: 444px;
    background: #EFDFBC;
}
.questions-header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 650px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}
.quiz-questions {
    margin-top: 100px;
}
<!DOCTYPE html>
<html>
<head>
 <meta charset = "UTF-8"/>
 <title>Questions</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
<div class = "quiz-questions">
 <div id="first-question" class="page active">
  <div id="questionHeader">
   <h1> Question 1 </h1>
  </div>
  <div id="questionOneBody">
  <h3>Question 1</h3>
  <ul>
   <li>A</li>
   <li>B</li>
  </ul>
   <hr>
   <input type="radio" name="quizquestionone" id="quiz-question-one-yes" value="yes" />
   <label for="quiz-question-one-yes" id="oneYes">Yes</label>
   <input type="radio" name="quizquestionone" id="quiz-question-one-no" value="no" />
   <label for="quiz-question-one-no" id="oneNo">No</label>
  </div>
 </div> 

 <div id="second-question" class="page">
  <div id="questionHeader">
   <h1> Question 2 </h1>
  </div>
  <div id="questionTwoBody">
   <h3>Question 2</h3>
   <hr>
   <input type="radio" name="quizquestiontwo" id="quiz-question-two-yes" value="yes" />
   <label for="quiz-question-two-yes" id="twoYes">Yes</label>
   <input type="radio" name="quizquestiontwo" id="quiz-question-two-no" value="no" />
   <label for="quiz-question-two-no" id="twoNo">No</label>
  </div>
 </div>

 <div id="third-question" class="page">
  <div id="questionHeader">
   <h1> Question 3 </h1>
  </div>
  <div id="questionThreeBody">
   <h3>Question 3</h3>
   <hr>
   <input type="radio" name="quizquestionthree" id="quiz-question-three-yes" value="yes" />
   <label for="quiz-question-three-yes" id="threeYes">Yes</label>
   <input type="radio" name="quizquestionthree" id="quiz-question-three-no" value="no" />
   <label for="quiz-question-three-no" id="threeNo">No</label>
  </div>
 </div>


 <div id="fourth-question" class="page">
  <div id="questionHeader">
   <h1> Question 4 </h1>
  </div>
  <div id="questionFourBody">
   <h3>Question 4</h3>
   <hr>
   <input type="radio" name="quizquestionfour" id="quiz-question-four-yes" value="yes" />
   <label for="quiz-question-four-yes" id="fourYes">Yes</label>
   <input type="radio" name="quizquestionfour" id="quiz-question-four-no" value="no" />
   <label for="quiz-question-four-no" id="fourNo">No</label>  
  </div>
 </div>


 <div id="fifth-question" class="page">
  <div id="questionHeader">
   <h1> Question 5 </h1>
  </div>
  <div id="questionFiveBody">
   <h3>Question 5</h3>
   <hr>
   <input type="radio" name="quizquestionfive" id="quiz-question-five-yes" value="yes" />
   <label for="quiz-question-five-yes" id="fiveYes">Yes</label>
   <input type="radio" name="quizquestionfive" id="quiz-question-five-no" value="no" />
   <label for="quiz-question-five-no" id="fiveNo">No</label>  
  </div>
 </div> 

<div class="page result">
 <div id="allResult">
  <div id="resultHeader">
   <h1> Congratulations </h1>
  </div>
  <h1 id="eligibleHeader"> You might be eligible. </h1>
  <hr id="eligibleHr">
  <div id="result">
  </div>
  <!-- Vertical Line -->
  <div class="verticalLine">
  </div>
  <!-- Vertical Line End -->
  <div id="rightSide">
   <h1>Schedule your free consultation now.</h1>
   <hr id="consultationHR">
   <div id="calenderTool">
   </div>
   <div id="calenderToolSideText">
    <p>words
    </p>
    <p>words</p>
    <br>
    <p>phone#</p>
    <p>M - F, 8:30 am - 5:00 pm </p> 
   </div>
   <hr id="endingHR">
   <h3 id="shareQuiz"> Share the quiz </h3>
   <p id="rightsidePara"> Your friends won't see your results,</p>
   <p id="rightsideParaTwo">just alink to take it themselves. </p>
  </div>
  </div>
 </div>
</div>

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

<script type="text/javascript">

var results = {};

/*function updateResult() {
  var r = results,
      rt = $('#result');
  if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
    rt.text('All Yes');
  } else if ((!r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (!r.quizquestionfour) && (!r.quizquestionfive)) {
    rt.text('All No');
  } else {
    rt.text('We have a mixed response');
  }
}*/

function updateResult() {
  var r = results,
      rt = $('#result');


  if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
    rt.text('green text');
  } 
 
  else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) {
    rt.text('green text');
  }
  
  else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
    rt.text('yellow text');
  }
  
  else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) {
    rt.text('yellow text');  
  }

  else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (!r.quizquestionfour) && (r.quizquestionfive)) {
 rt.text('red text');
  }
  
  else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (!r.quizquestionfour) && (!r.quizquestionfive)) {
 rt.text('red text');  }
  else{
 rt.text('red text');  }
}

$(function () {
  $('body').on('click', '[name]', function () {
    var $this = $(this),
        page = $this.closest('.page'),
        next_page = $(page.next());
    results[$this.attr('name')] = $(this).val() === 'yes';
    page.removeClass('active');
    next_page.addClass('active');
    if (next_page.hasClass('result')) updateResult();
  });
});
  
</script>

4个回答
4

你好，在你的条件语句中，我添加了一个jQuery代码来更改文本颜色。

添加这段代码并查看它是否有效，它可以用来更改文本颜色。 使用以下代码：

  $("#result").css("color","green"); //change text color

不要使用rt.text('green text');，而是尝试在条件语句中更新这个答案。

请尝试更新这个答案后再进行操作。

 if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) &&   
   (r.quizquestionfour) && (r.quizquestionfive)) {
  //rt.text('green text');

  $("#result").text("green text ").css("color","green");
    } //when want green

//当需要“红色”时

 else if ((r.quizquestionone) && (r.quizquestiontwo) &&  
 (r.quizquestionthree) && (!r.quizquestionfour) && (r.quizquestionfive)) {
      $("#result").text("red text ").css("color","red");
  }
但这会使它们全部变成绿色，当条件需要黄色或红色时，我该如何改变颜色？ - Maddy
我有点困惑，那么我应该在哪里添加这段文字呢？ - Maddy
如果 ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { $("#result").css("color","green"); rt.text('绿色文本'); }我尝试了这个，但它没有起作用。我错在哪里了？ - Maddy
我明白那部分内容是正确的。但很抱歉，我不明白我的文本应该放在哪里？“绿色文本”是我的实际文本，那我应该把它放在哪里呢？使用这段代码执行时，没有文本会被显示。 - Maddy
不，它仍然没有改变颜色。 - Maddy
显示剩余5条评论
2
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Questions</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">
        * {
            box-sizing: border-box;
            background-color: #bf2e1a;
        }

        header {
            color: #EFDFBC;
            border-style: solid;
            border-color: #EFDFBC;
            top: 100px;
            margin-left: 650px;
            margin-right: 650px;
            margin-top: 150px;
            text-align: center;
            font-size: 60px;
            border-width: 5px;
        }

        div#main-content {
            margin-top: 100px;
        }

        div#disclaimer {
            width: 800px;
            height: 100px;
            height: 500px;
            margin: 0 auto;
            margin-top: 200px;
            background: #EFDFBC;
        }

        div#get-justice {
            position: relative;
            top: 30px;
            padding-top: 10px;
            background-color: #EFDFBC;
            margin: 0 auto;
            width: 600px;
            height: 600px;
        }

            div#get-justice p {
                background-color: #EFDFBC;
                color: red;
                padding: 40px 40px 4px 40px;
                font-size: 28px;
            }

            div#get-justice button {
                background-color: red;
                border: none;
                color: white;
                margin-top: 120px;
                padding: 20px 37px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 21px;
                cursor: pointer;
            }

        h3 {
            background: #EFDFBC;
            text-align: center;
            color: red;
            font-size: 23px;
            padding-top: 25px;
        }

        div#first-question {
            text-align: center;
        }

        ul {
            columns: 2;
            background: #EFDFBC;
            text-align: -webkit-left;
        }

        li {
            text-align: -webkit-match-parent;
            background: #EFDFBC;
            display: block;
            padding: 1px 0px 3px 37px;
        }

        input#quiz-question-one-yes {
            display: none;
            margin: 11px;
        }

        input#quiz-question-one-no {
            display: none;
            margin: 11px;
        }

        label#oneYes {
            display: inline-block;
            margin: 10px;
            padding: 10px 30px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }

        label#oneNo {
            display: inline-block;
            margin: 10px;
            padding: 10px 30px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }

        input#quiz-question-two-yes {
            display: none;
            margin: 11px;
        }

        input#quiz-question-two-no {
            display: none;
            margin: 11px;
        }

        label#twoYes {
            display: inline-block;
            margin: 10px 208px;
            padding: 10px 30px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }

        label#twoNo {
            display: inline-block;
            margin: 0px 0 0 -197px;
            padding: 10px 30px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }

        input#quiz-question-three-yes {
            display: none;
            margin: 11px;
        }

        input#quiz-question-three-no {
            display: none;
            margin: 11px;
        }

        label#threeYes {
            display: inline-block;
            margin: 10px 208px;
            padding: 10px 30px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }

        label#threeNo {
            display: inline-block;
            margin: 0px 0 0 -197px;
            padding: 10px 30px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }
        /*label#threeYes {
            display: inherit;
            margin: 13px 360px 0px 195px;
            padding: 8px 73px 8px 22px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }
        label#threeNo {
            display: inherit;
            margin: -54px 296px 0px 300px;
            padding: 12px 66px 5px 18px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }*/
        input#quiz-question-four-yes {
            display: none;
            margin: 11px;
        }

        input#quiz-question-four-no {
            display: none;
            margin: 11px;
        }

        label#fourYes {
            display: inline-block;
            margin: 10px 208px;
            padding: 10px 30px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }

        label#fourNo {
            display: inline-block;
            margin: 0px 0 0 -197px;
            padding: 10px 30px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }

        /*
        label#fourYes {
            display: inherit;
            margin: 13px 360px 0px 195px;
            padding: 8px 73px 8px 22px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }
        label#fourNo {
            display: inherit;
            margin: -54px 296px 0px 300px;
            padding: 12px 66px 5px 18px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }*/
        input#quiz-question-five-yes {
            display: none;
            margin: 11px;
        }

        input#quiz-question-five-no {
            display: none;
            margin: 11px;
        }

        label#fiveYes {
            display: inline-block;
            margin: 10px 208px;
            padding: 10px 30px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }

        label#fiveNo {
            display: inline-block;
            margin: 0px 0 0 -197px;
            padding: 10px 30px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }

        /*
        label#fiveYes {
            display: inherit;
            margin: 13px 360px 0px 195px;
            padding: 8px 73px 8px 22px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }
        label#fiveNo {
            display: inherit;
            margin: -54px 296px 0px 300px;
            padding: 12px 66px 5px 18px;
            background-color: red;
            border-color: #ddd;
            font-size: 33px;
            text-align: center;
        }*/

        .clientinfo {
            height: 445px;
            background-color: #EFDFBC;
        }

        p {
            background-color: #EFDFBC;
            font-size: 23px;
            margin: 0 auto;
            padding: 10px 0px 1px 70px;
        }

        input[type="text"] {
            background-color: white;
            padding: 4px 0px 0px 10px;
            margin: 0px 0px 0px 70px;
        }

        button {
            display: block;
            margin: 0 auto;
            padding: 25px 35px 20px 25px;
            font-size: 35px;
            margin-top: 45px;
            color: #EFDFBC;
        }

            button#start {
                display: block;
                margin: 0 auto;
                width: 200px;
                padding: 25px 35px 20px 25px;
                font-size: 35px;
                margin-top: -272px;
                margin-right: 68px;
            }

        hr {
            width: 165px;
            padding: 1px 0px 0px 0px;
        }

        div#disclaimer {
            width: 800px;
            padding: 27px 10px 10px 0px;
        }

        div#questionOneBody {
            background: #EFDFBC;
        }

        div#questionTwoBody {
            background: #EFDFBC;
        }

        div#questionThreeBody {
            background: #EFDFBC;
        }

        div#questionFourBody {
            background: #EFDFBC;
        }

        div#questionFiveBody {
            background: #EFDFBC;
        }

        h1 {
            /* padding: 20px 4px 20px; */
            text-align: center;
            margin-top: 25px;
        }
            /*
        h1 {
            //background: #EFDFBC;
            padding: 20px 4px 20px;
            text-align: center;
        }
        */

            h1#disclaimerHeader {
                background: #EFDFBC;
                padding: 20px 4px 20px;
                text-align: center;
            }

        p {
            background-color: #EFDFBC;
            font-size: 23px;
            margin: 0 auto;
            padding: 1px 0px 0px 20px;
        }

        div#disc-container {
            width: 450px;
            background: #EFDFBC;
            padding: 10px 10px 14px 10px;
            border-style: solid;
            border-color: red;
            border-width: 10px;
            margin-left: 20px;
        }

        a#disclaimerLink {
            text-decoration: none;
        }


        /*.hideHeader{
            display:none;
        }*/

        p#greenText {
            background: #EFDFBC;
            display: block;
            width: 800px;
            margin: 0 auto;
            margin-top: 300px;
            font-size: 30px;
            color: green;
            text-align: -webkit-auto;
            padding: 50px 50px 50px 50px;
        }

        p#yellowText {
            background: #EFDFBC;
            display: block;
            width: 800px;
            margin: 0 auto;
            margin-top: 300px;
            font-size: 30px;
            color: yellow;
            text-align: -webkit-auto;
            padding: 50px 50px 50px 50px;
        }

        p#redText {
            background: #EFDFBC;
            display: block;
            width: 800px;
            margin: 0 auto;
            margin-top: 300px;
            font-size: 30px;
            color: red;
            text-align: -webkit-auto;
            padding: 50px 50px 50px 50px;
        }

        div#questionHeader {
            height: 140px;
            color: #EFDFBC;
            border-style: solid;
            margin-top: 163px;
            font-size: 28px;
            border-width: 10px;
        }

        /*div#resultHeader {
            margin-top: 163px;
            font-size: 28px;
            border-width: 10px;
        }

        div#resultHeader {
            height: 140px;
            color: #EFDFBC;
            border-style: solid;
            margin-bottom: 10px;
            font-size: 28px;
            border-width: 10px;
        }*/

        div#resultHeader {
            color: #EFDFBC;
            border-style: solid;
            margin-bottom: 10px;
            margin-left: 110px;
            width: 1170px;
            font-size: 28px;
            border-width: 10px;
        }

        div#quizResult {
            font-size: 20px;
            /* width: 650px; */
            margin: 0 auto;
            background: #EFDFBC;
            height: 600px;
            margin-top: 10px;
        }

        div#allResult {
            margin: 0 auto;
            margin-left: -350px;
            margin-right: -350px;
            /* background: #EFDFBC; */
        }

        div#leftResult {
            background: #EFDFBC;
            width: 610px;
        }

        div#result {
            background: #EFDFBC;
            height: 634px;
            font-size: 26px;
            width: 450px;
            margin-left: 110px;
            padding: 75px 45px 0px 70px;
        }

        hr#eligibleHr {
            position: absolute;
            margin-top: 57px;
            width: 300px;
            margin-left: 182px;
        }

        div#calenderToolSideText {
            background: #EFDFBC;
            /* width: 300px; */
            margin-left: 551px;
            margin-bottom: -18px;
            margin-top: -334px;
            padding: 0px 68px 0px 0px;
        }

        div#rightSide {
            background: #EFDFBC;
            margin-left: 480px;
            margin-top: -659px;
            height: 634px;
            width: 800px;
        }

            div#rightSide h1 {
                text-align: center;
                margin-top: 25px;
                margin-right: 24px;
                background: #EFDFBC;
                color: red;
                padding: 18px 10px 10px 10px;
            }

        hr#consultationHR {
            width: 595px;
            margin-right: 77px;
            margin-top: -29px;
        }

        div#calenderTool {
            background: blue;
            width: 400px;
            height: 330px;
            margin-top: 25px;
            margin-left: 148px;
        }

        hr#endingHR {
            width: 495px;
            margin-top: 25px;
            color: red;
            width: 597px;
            margin-right: 76px;
            margin-top: 25px;
        }

        h3#shareQuiz {
            margin-right: 380px;
            margin-top: -9px;
        }

        p#rightsidePara {
            margin-left: 131px;
            margin-top: -12px;
            color: red;
        }

        p#rightsideParaTwo {
            margin-left: 136px;
            color: red;
        }

        h1#eligibleHeader {
            position: absolute;
            margin-left: 180px;
            margin-top: 20px;
            background: #EFDFBC;
            color: red;
        }

        .verticalLine {
            width: 2px;
            height: 570px;
            position: absolute;
            margin-left: 591px;
            margin-top: -615px;
        }


        .bkr-header {
            color: #EFDFBC;
            border-style: solid;
            border-color: #EFDFBC;
            top: 153px;
            padding-bottom: 30px;
            padding-top: 30px;
            /* margin-top: 163px; */
            margin: 0 auto;
            width: 600px;
            text-align: center;
            font-size: 60px;
            border-width: 10px;
        }

        .hidden {
            display: none;
        }

        .visible {
            display: block;
            margin: 0 auto;
            width: 650px;
            height: 445px;
            background: #EFDFBC;
        }

        .visible2 {
            display: block;
            margin: 0 auto;
            width: 650px;
            height: 165px;
            background: #EFDFBC;
        }

        .visible4 {
            display: block;
            margin: 0 auto;
            width: 650px;
            height: 195px;
            background: #EFDFBC;
        }

        .visibleHeader {
            color: #EFDFBC;
            border-style: solid;
            border-color: #EFDFBC;
            top: 153px;
            padding-bottom: 30px;
            padding-top: 30px;
            /* margin-top: 163px; */
            margin: 0 auto;
            width: 650px;
            text-align: center;
            font-size: 60px;
            border-width: 10px;
        }

        .page {
            display: none;
        }

            .page.active {
                display: block;
                margin: 0 auto;
                width: 650px;
            }

        .questions {
            margin: 0px auto;
            width: 650px;
            height: 444px;
            background: #EFDFBC;
        }

        .questions-header {
            color: #EFDFBC;
            border-style: solid;
            border-color: #EFDFBC;
            top: 153px;
            padding-bottom: 30px;
            padding-top: 30px;
            /* margin-top: 163px; */
            margin: 0 auto;
            width: 650px;
            text-align: center;
            font-size: 60px;
            border-width: 10px;
        }

        .quiz-questions {
            margin-top: 100px;
        }

        .green {
            color: green;
        }

        .red {
            color: red;
        }

        .yellow {
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="quiz-questions">
        <div id="first-question" class="page active">
            <div id="questionHeader">
                <h1> Question 1 </h1>
            </div>
            <div id="questionOneBody">
                <h3>Question 1</h3>
                <ul>
                    <li>A</li>
                    <li>B</li>
                </ul>
                <hr>
                <input type="radio" name="quizquestionone" id="quiz-question-one-yes" value="yes" />
                <label for="quiz-question-one-yes" id="oneYes">Yes</label>
                <input type="radio" name="quizquestionone" id="quiz-question-one-no" value="no" />
                <label for="quiz-question-one-no" id="oneNo">No</label>
            </div>
        </div>

        <div id="second-question" class="page">
            <div id="questionHeader">
                <h1> Question 2 </h1>
            </div>
            <div id="questionTwoBody">
                <h3>Question 2</h3>
                <hr>
                <input type="radio" name="quizquestiontwo" id="quiz-question-two-yes" value="yes" />
                <label for="quiz-question-two-yes" id="twoYes">Yes</label>
                <input type="radio" name="quizquestiontwo" id="quiz-question-two-no" value="no" />
                <label for="quiz-question-two-no" id="twoNo">No</label>
            </div>
        </div>

        <div id="third-question" class="page">
            <div id="questionHeader">
                <h1> Question 3 </h1>
            </div>
            <div id="questionThreeBody">
                <h3>Question 3</h3>
                <hr>
                <input type="radio" name="quizquestionthree" id="quiz-question-three-yes" value="yes" />
                <label for="quiz-question-three-yes" id="threeYes">Yes</label>
                <input type="radio" name="quizquestionthree" id="quiz-question-three-no" value="no" />
                <label for="quiz-question-three-no" id="threeNo">No</label>
            </div>
        </div>


        <div id="fourth-question" class="page">
            <div id="questionHeader">
                <h1> Question 4 </h1>
            </div>
            <div id="questionFourBody">
                <h3>Question 4</h3>
                <hr>
                <input type="radio" name="quizquestionfour" id="quiz-question-four-yes" value="yes" />
                <label for="quiz-question-four-yes" id="fourYes">Yes</label>
                <input type="radio" name="quizquestionfour" id="quiz-question-four-no" value="no" />
                <label for="quiz-question-four-no" id="fourNo">No</label>
            </div>
        </div>


        <div id="fifth-question" class="page">
            <div id="questionHeader">
                <h1> Question 5 </h1>
            </div>
            <div id="questionFiveBody">
                <h3>Question 5</h3>
                <hr>
                <input type="radio" name="quizquestionfive" id="quiz-question-five-yes" value="yes" />
                <label for="quiz-question-five-yes" id="fiveYes">Yes</label>
                <input type="radio" name="quizquestionfive" id="quiz-question-five-no" value="no" />
                <label for="quiz-question-five-no" id="fiveNo">No</label>
            </div>
        </div>

        <div class="page result">
            <div id="allResult">
                <div id="resultHeader">
                    <h1> Congratulations </h1>
                </div>
                <h1 id="eligibleHeader"> You might be eligible. </h1>
                <hr id="eligibleHr">
                <div id="result">
                </div>
                <!-- Vertical Line -->
                <div class="verticalLine">
                </div>
                <!-- Vertical Line End -->
                <div id="rightSide">
                    <h1>Schedule your free consultation now.</h1>
                    <hr id="consultationHR">
                    <div id="calenderTool">
                    </div>
                    <div id="calenderToolSideText">
                        <p>
                            words
                        </p>
                        <p>words</p>
                        <br>
                        <p>phone#</p>
                        <p>M - F, 8:30 am - 5:00 pm </p>
                    </div>
                    <hr id="endingHR">
                    <h3 id="shareQuiz"> Share the quiz </h3>
                    <p id="rightsidePara"> Your friends won't see your results,</p>
                    <p id="rightsideParaTwo">just alink to take it themselves. </p>
                </div>
            </div>
        </div>
    </div>


</body>
</html>

<script type="text/javascript">

    var results = {};

    /*function updateResult() {
      var r = results,
          rt = $('#result');
      if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
        rt.text('All Yes');
      } else if ((!r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (!r.quizquestionfour) && (!r.quizquestionfive)) {
        rt.text('All No');
      } else {
        rt.text('We have a mixed response');
      }
    }*/

    function updateResult() {
        var r = results,
            rt = $('#result');


        if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
            rt.text('green text').addClass('green');
        }

        else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) {
            rt.text('green text').addClass('green');
        }

        else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
            rt.text('yellow text').addClass('yellow');
        }

        else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) {
            rt.text('yellow text').addClass('yellow');
        }

        else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (!r.quizquestionfour) && (r.quizquestionfive)) {
            rt.text('red text').addClass('red');
        }

        else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (!r.quizquestionfour) && (!r.quizquestionfive)) {
            rt.text('red text').addClass('red');
        }
        else {
            rt.text('red text').addClass('red');
        }
    }

    $(function () {
        $('body').on('click', '[name]', function () {
            var $this = $(this),
                page = $this.closest('.page'),
                next_page = $(page.next());
            results[$this.attr('name')] = $(this).val() === 'yes';
            page.removeClass('active');
            next_page.addClass('active');
            if (next_page.hasClass('result')) updateResult();
        });
    });

</script>
1
创建一个带有您想要更改颜色的元素的类名。然后，您可以在jQuery中调用它，并像这样更改颜色：$('.yourclassname').css({color: 'red'});
我有多个相同类别的div，所以不确定那是否可行。 - Maddy
它会影响所有具有相同类的 div。或者您可以为该单个 div 创建一个新类。 - Ron.Basco
你也可以使用jQuery的add/removeClass方法来实现你想要的效果。 - Ron.Basco
1
你可以使用 .html 代替 .text，并在想要输出的单词周围包裹 span 标签（假设你想打印一个单词）。 jQuery 
rt.html('<span class="green">right</span>');
rt.html('<span class="yellow">close</span>');
rt.html('<span class="red">wrong</span>');

CSS

// cancel out the * { background-color: red; }
.green, .yellow, .red {
  background-color: #EFDFBC;
}
// style the spans
.green {color: green;}
.yellow {color: yellow;}
.red {color: red;}

更多的内容...

<script type="text/javascript"> 可以简写为 <script>，因为已经声明了 html5，即 <!DOCTYPE html>

if (next_page.hasClass('result')) updateResult();

可能应该是

if (next_page.hasClass('result')) {
    updateResult();
}

尽管看起来没有使用 {} 也能正常工作

这是我玩耍的代码片段

https://jsfiddle.net/Hastig/wz1kc0zj/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接