代码之家  ›  专栏  ›  技术社区  ›  Charlie McShane

根据输出值更改背景颜色

css jquery javascript
  •  1
  • Charlie McShane  · 技术社区  · 9 年前

    如何根据div包含的内容更改其背景色 <p> 标签值/编号何时生成?

    到目前为止,我已经附上了彩票生成器的代码。我只需要根据数字结果改变红色背景颜色,如下所示:

    • 10-19:蓝色
    • 30-39:绿色

    CodePen Example 

    $("#buttonGen").click(function() {
  $(".circle .result1").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result2").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result3").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result4").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result5").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result6").html((Math.floor(Math.random() * 49) + 1));
});
    5 回复  |  直到 9 年前
        1
  •  3
  •   Rory McCrossan Hsm Sharique Hasan    9 年前

    要做您需要的事情,您可以首先将相同的类应用于所有 .resultN 元素。这将通过允许您使用单个调用 html() 影响所有元素。

    switch 

    $("#buttonGen").click(function() {
  $(".circle .result").text(function() {
    var value = parseInt(Math.floor(Math.random() * 49) + 1), bgColour;
    switch (true) {
      case (value < 10): bgColour = 'white'; break;
      case (value < 20): bgColour = 'blue'; break;
      case (value < 30): bgColour = 'pink'; break;
      case (value < 40): bgColour = 'green'; break;
      case (value < 50): bgColour = 'yellow'; break;
    }   
    $(this).closest('.circle').css('background-color', bgColour);
    return value;
  });
});
    .__hero-container .title {
  margin-bottom: 30px;
}

.__hero-container .numbers .circle {
  background-color: red;
  border-radius: 50px;
  height: 90px;
}

.__hero-container .numbers .circle p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.__hero-container .button {
  margin-top: 30px;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="__hero-container">

  <div class="container title">
    <div class="col-md-12 text-center">
      <h1>Lottery Generator</h1>
    </div>
  </div>

  <div class="container text-center numbers">
    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result">0</p>
      </div>
    </div>
  </div>

  <div class="container button">
    <div class="col-md-12 text-center">
      <button id="buttonGen">Generate</button>
    </div>
  </div>

</div>
        2
  •  1
  •   Super User    9 年前

    .each() 为了这个。检查以下更新的代码段。。 

    $("#buttonGen").click(function() {
  $(".circle .result1").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result2").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result3").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result4").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result5").html((Math.floor(Math.random() * 49) + 1));
    $(".circle .result6").html((Math.floor(Math.random() * 49) + 1));

    $('.circle').each(function(){
         var numResult = parseInt($(this).find('p').html());
         if(numResult >=1 && numResult <=9) {
             $(this).css('background','white');
         } else if (numResult >=10 && numResult <=19) {
             $(this).css('background','blue');
         } else if (numResult >=20 && numResult <=29) {
             $(this).css('background','pink');
         } else if (numResult >=30 && numResult <=39) {
             $(this).css('background','green');
         } else if (numResult >=40 && numResult <=49) {
             $(this).css('background','yellow');
         }
         
         
    })

})
    .__hero-container .title {
  margin-bottom: 30px;
}

.__hero-container .numbers .circle {
  background-color: red;
  border-radius: 50px;
  height: 90px;
  border: 1px solid #000; 
}

.__hero-container .numbers .circle p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.__hero-container .button {
  margin-top: 30px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="__hero-container">

  <div class="container title">
    <div class="col-md-12 text-center">
      <h1>Lottery Generator</h1>
    </div>
  </div>
  
  <div class="container text-center numbers">
    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result1">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result2">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result3">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result4">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result5">0</p>
      </div>
    </div>

    <div class="col-md-2 col-xs-2 text-center">
      <div class="circle">
        <p class="result6">0</p>
      </div>
    </div>
  </div>
  
  <div class="container button">
    <div class="col-md-12 text-center">
      <button id="buttonGen">Generate</button>
    </div>
  </div>
  
</div>
        3
  •  1
  •   Chiller    9 年前

    只需为检查内容的所有元素添加一个循环,然后添加一个特定背景 

    $( ".circle p" ).each(function(index) {
    if ($(this).html()>0 && $(this).html()<10){
      $(this).parent().css("background","black");
    }else if ($(this).html()>9 && $(this).html()<20){
      $(this).parent().css("background","blue");
    }
    //continue the rest for Ping, Green and Yellow
  });
        4
  •  1
  •   Mathiasfc    9 年前

    这将帮助您,只需添加其他验证。。。 

    $("#buttonGen").click(function() {
  $(".result1").html((Math.floor(Math.random() * 49) + 1));
  $(".result2").html((Math.floor(Math.random() * 49) + 1));
  $(".result3").html((Math.floor(Math.random() * 49) + 1));
  verifyContent();
});

function verifyContent() {
  $('.circle').each(function(i, obj) {
    var content = $(this).html();
    //console.log(content);
    if (content > 10 && content < 19) {
      $(this).css("background", "blue");
    } else {
      $(this).css("background", "white");
    }
  });
}
    .circle {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  border-radius: 50%;
  display: inline-block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonGen">Generate</button><br><br>
<div class="circle result1"></div>
<div class="circle result2"></div>
<div class="circle result3"></div>
        5
  •  1
  •   Mike    9 年前

    在设置html之后,我可能会有一个函数,该函数将根据它确定颜色。 

    $("#buttonGen").click(function() {
  $(".circle .result1").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result2").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result3").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result4").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result5").html((Math.floor(Math.random() * 49) + 1));
  $(".circle .result6").html((Math.floor(Math.random() * 49) + 1));
  determineColor();
});

function determineColor(){
 $(".circle").each(function(index, value){
    var color = getColorValue(value);
    $(this).css("background-color", color) 
 }
}

function getColorValue(value){
  if(value > 1 && value < 9){
    return "white";
  }
  // add others
}
    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    1 年前
    magenta placenta  ·  将css变量合并为一个变量
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    1 年前
    Luckkks  ·  过渡色工作不正常
    1 年前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号