在下面的div上运行代码而不是所有具有相同名称的div？

时间：2018-05-25 21:08:56

标签： javascript jquery

此代码在.flow-hold的所有实例上执行，而不仅仅是.title-hold下面的div，其中包含与==匹配的文本。 原因是我需要更改我用于每个gauge1，gauge2，gauge3实例的范围。我试过$（'。flow-hold'）。next（function（）{ 但是这个......或者不提前...... 

$('.title-hold').each(function() {
  if ($(this).text() == 'gauge1') {
    $('.flow-hold').each(function() {
      if (parseInt($(this).text()) >= 0.0 && ($(this).text()) <= 100.0) {
        $(this).css("background-color", "green");
      } else if (parseInt($(this).text()) >= 101.0 && ($(this).text()) <= 200.0) {
        $(this).css("background-color", "yellow");
      } else if (parseInt($(this).text()) >= 300.0 && ($(this).text()) <= 400.0) {
        $(this).css("background-color", "red");
      } else {
        $(this).css("background-color", "purple");
      }
    });
  } else {
    //do nothing
  }
});


$('.title-hold').each(function() {
  if ($(this).text() == 'gauge2') {
    $('.flow-hold').each(function() {
      if (parseInt($(this).text()) >= 0.0 && ($(this).text()) <= 250.0) {
        $(this).css("background-color", "orange");
      } else if (parseInt($(this).text()) >= 251.0 && ($(this).text()) <= 345.0) {
        $(this).css("background-color", "pink");
      } else if (parseInt($(this).text()) >= 346.0 && ($(this).text()) <= 800.0) {
        $(this).css("background-color", "brown");
      } else {
        $(this).css("background-color", "purple");
      }
    });

  } else {
    //do nothing
  }
});
.title-hold {
  width: 100%;
  background: #000;
  clear: both;
  text-align: center;
  color: #fff;
  font-size: 18px;
}

.flow-hold {
  width: 50%;
  float: left;
  text-align: center;
  font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title-hold">gauge1</div>
<div class="flow-hold">200</div>

<div class="title-hold">gauge2</div>
<div class="flow-hold">10.5</div>

<div class="title-hold">gauge3</div>
<div class="flow-hold">325.5</div>

3 个答案:

答案 0 :(得分：0)

下面：

const gaugeConfig = {
'gauge1': {
    ranges: [
        {
            min: 0,
            max: 100,
            color: 'green'
        },
        {
            min: 101,
            max: 200,
            color: 'yellow'
        },
        {
            min: 300,
            max: 400,
            color: 'red'
        }
    ],
    defaultColor: 'purple'
},
'gauge2': {
    ranges: [
        {
            min: 0,
            max: 250,
            color: 'orange'
        },
        {
            min: 251,
            max: 345,
            color: 'pink'
        },
        {
            min: 346,
            max: 800,
            color: 'brown'
        }
    ],
    defaultColor: 'purple'
},
}

function updateColors(flowHold, config) {
flow = parseFloat(flowHold.text());
flowHold.css("background-color", config.defaultColor);
for( var i=0; i < config.ranges.length; i++ ) {
        range = config.ranges[i];
    if (flow >= range.min && flow <= range.max) {
        flowHold.css("background-color",range.color);
        break;
    }
}
}

$('.flow-hold').each(function() {
flowHold = $(this);
titleHold = flowHold.prev();
title = titleHold.text();
config = gaugeConfig[title];
if (config)
    updateColors(flowHold, config);
});
 
.title-hold {
    width: 100%;
    background: #000;
    clear: both;
    text-align: center;
    color: #fff;
	font-size: 18px;
}

.flow-hold {
    width: 50%;
    float: left;
    text-align: center;
	font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title-hold">gauge1</div>
<div class="flow-hold">200</div>

<div class="title-hold">gauge2</div>
<div class="flow-hold">10.5</div>

<div class="title-hold">gauge3</div>
<div class="flow-hold">325.5</div>

<div class="title-hold">gauge4</div>
<div class="flow-hold">201</div>

答案 1 :(得分：0)

.next()不接受函数参数，您只需使用它来获取您想要操作的元素。

此外，else if语句不需要检查下限。前面<=中的if测试可确保该数字高于该限制。您的代码也在100.0和101.0之间跳过了值 - 它们最终会在else结尾。

$('.title-hold').each(function() {
  var flowHold = $(this).next('.flow-hold');
  var nextVal = parseInt(flowHold.text());
  if ($(this).text() == 'gauge1') {
    if (nextVal >= 0.0 && nextVal <= 100.0) {
      flowHold.css("background-color", "green");
    } else if (nextVal <= 200.0) {
      flowHold.css("background-color", "yellow");
    } else if (nextVal <= 400.0) {
      flowHold.css("background-color", "red");
    } else {
      flowHold.css("background-color", "purple");
    }
  } else if ($(this).text() == 'gauge2') {
    if (nextVal >= 0.0 && nextVal <= 250.0) {
      flowHold.css("background-color", "orange");
    } else if (nextVal <= 245.0) {
      flowHold.css("background-color", "pink");
    } else if (nextVal <= 800.0) {
      flowHold.css("background-color", "brown");
    } else {
      flowHold.css("background-color", "purple");
    }
  }
});
.title-hold {
  width: 100%;
  background: #000;
  clear: both;
  text-align: center;
  color: #fff;
  font-size: 18px;
}

.flow-hold {
  width: 50%;
  float: left;
  text-align: center;
  font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title-hold">gauge1</div>
<div class="flow-hold">200</div>

<div class="title-hold">gauge2</div>
<div class="flow-hold">10.5</div>

<div class="title-hold">gauge3</div>
<div class="flow-hold">325.5</div>

答案 2 :(得分：0)

不需要多个循环。只需循环一次并在每次循环迭代时检查所有gauge值并相应地采取行动。

此外，使用CSS类更简单，而不是设置内联样式。

此外，请注意>=和<=值。你拥有它的方式，如果值是100.5，它就不会匹配任何条件。您现在可能不打算使用十进制值，但通过稍微更改范围，您将来会受到保护。

查看内联评论。

＆＃13;
＆＃13; 
$('.title-hold').each(function() {
  let text = $(this).text();           // Get the text of the .title-hold element
  
  // Get a reference to the .flow-hold element that follows it.
  // .next() with no arguments will return the next sibline element after the current one.
  let next = $(this).next();
  
  // Get the text of the .flow-hold element that follows it and convert to a number.
  // The pre-pended "+" here forces a conversion of the string to a number.
  let num = +next.text();    
  
  // Depending on what the text of the current .title-hold element being looped is...
  switch(text){
    case 'gauge1':
      if(num >= 0 && num <= 100){
        next.addClass("green");        
      } else if(num <= 200){  // <-- NOTE: the previous test already handled values <=100 
        next.addClass("yellow");       
      } else if(num <= 400){
        next.addClass("red");       
      } else {
        next.addClass("purple");       
      } 
      break;
    case 'gauge2':
      if(num >= 0 && num <= 250){
        next.addClass("orange");        
      } else if(num <= 345){
        next.addClass("pink");       
      } else if(num <= 800){
        next.addClass("brown");       
      } else {
        next.addClass("purple");       
      }     
      break;
      
    case 'gauge3':
      // Repeat the if statement from above, but with appropriate tests and classes 
      break;
  }
});
＆＃13; 
.title-hold {
    width: 100%;
    background: #000;
    clear: both;
    text-align: center;
    color: #fff;
	font-size: 18px;
}

.flow-hold {
    width: 50%;
    float: left;
    text-align: center;
	font-size: 18px;
}


/* These classes will be conditionally applied */
.green { background-color:green; }
.yellow { background-color:yellow; }
.red { background-color:red; }
.purple { background-color:purple; }
.orange { background-color:orange; }
.pink { background-color:pink; }
.brown { background-color:brown; }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title-hold">gauge1</div>
<div class="flow-hold">200</div>

<div class="title-hold">gauge2</div>
<div class="flow-hold">10.5</div>

<div class="title-hold">gauge3</div>
<div class="flow-hold">325.5</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题