Question

我正在尝试更改if语句的选项颜色。这是我的表格：

function myFunction() {
  var lia = document.createElement("h5");
  var lib = document.createElement("p");

  var item = document.getElementById('task').value;
  var pro = document.getElementById('priority').value;

  var item_list = document.createTextNode(item);
  var item_pro = document.createTextNode(pro);

  lia.appendChild(item_list);
  lib.appendChild(item_pro);

  document.getElementById("result").appendChild(lia);
  document.getElementById("priorit").appendChild(lib);

  if (pro == 'Urgent') {
    $("p").css('color', 'red');
  }
  if (pro == 'Critical') {
    $("p").css('color', 'orange');
  }
  if (pro == 'Normal') {
    $("p").css('color', 'green');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="task" type="text" />
<select id="priority">
  <option id="Urgent">Urgent</option>
  <option id="Critical">Critical</option>
  <option id="Normal">Normal</option>
</select>

<button onclick="myFunction()">Add</button>

<h3>List Result</h3>
<table>
  <th id="result"></th>
  <th id="priorit"></th>
<table>

这个if语句是我想做的。但是现在，任何时候我添加到列表另一个项目与其他选项，所有颜色都会更改为最后一个。你可以在这里看到我的问题：

https://jsbin.com/selenifepa/edit?html,js,output

我该怎么办？

Answer 1

您可以选择添加的元素，而不是选择所有段落元素：

if(pro=='Urgent'){
   $(lib).css('color','red');
 }
 if(pro=='Critical'){
   $(lib).css('color','orange');
 }
 if(pro=='Normal'){
   $(lib).css('color','green');
 }

用这个替换你的if，这就是它......

Answer 2

使用:last-child css选择器。

请参阅此代码

function myFunction() {

var lia = document.createElement("h5");
var lib = document.createElement("p");

var item = document.getElementById('task').value;
var pro = document.getElementById('priority').value;

var item_list = document.createTextNode(item);
var item_pro = document.createTextNode(pro);

lia.appendChild(item_list);
lib.appendChild(item_pro);

document.getElementById("result").appendChild(lia);
document.getElementById("priorit").appendChild(lib);


if(pro=='Urgent'){
   $("p:last-child").css('color','red');
 }
 if(pro=='Critical'){
   $("p:last-child").css('color','orange');
 }
 if(pro=='Normal'){
   $("p:last-child").css('color','green');
 }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="task" type="text"/>
<select id="priority">
<option id="Urgent">Urgent</option>
<option id="Critical">Critical</option>
<option id="Normal">Normal</option>
 </select>

<button onclick="myFunction()">Add</button>

<h3>List Result</h3>
<table>
<th id="result"></th>
<th id="priorit"></th>
<table>

Answer 3

问题是因为$('p')选择器匹配DOM中的所有现有p元素，而不仅仅是您添加的元素。您可以使用$(lib)仅影响新添加的p代码来解决此问题。

$(lib).css('color', 'green');

但是，我还建议您使用不显眼的事件处理程序，因为on*事件属性被认为是过时的。正如您已经在使用jQuery，以下是如何做到这一点：

$('#add').click(function(e) {
  e.preventDefault();
  var pro = $('#priority').val();
  var $lia = $("<h5 />").text($('#task').val()).appendTo('#result');
  var $lib = $("<p />").text(pro).appendTo('#priorit');

  if (pro == 'Urgent') {
    $lib.css('color', 'red');
  }
  if (pro == 'Critical') {
    $lib.css('color', 'orange');
  }
  if (pro == 'Normal') {
    $lib.css('color', 'green');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="task" type="text" />
<select id="priority">
  <option id="Urgent">Urgent</option>
  <option id="Critical">Critical</option>
  <option id="Normal">Normal</option>
</select>

<button id="add">Add</button>

<h3>List Result</h3>
<table>
  <th id="result"></th>
  <th id="priorit"></th>
<table>

Answer 4

原因是您使用p选择了所有$('p')代码。此外，你有混合jQuery与vanilla JS。我假设您想使用jQuery来简化代码。在这里。

function add() {
  // select the elements and assign to a var, that way we don't have to be selecting the elements over and over, which is 'slow' (research "Why traversing the DOM is slow")
  var results = $('#results'),
  task = $('#task'),
  priority = $('#priority'),
  
  // create the new div element with it's content
  newResult = $('<div>'+task.val()+' '+priority.val()+'</div>');

  // Decide what color to apply
  if(priority.val() == 'Urgent'){
    newResult.css('color','red');
  }
  
  if(priority.val() == 'Critical'){
    newResult.css('color','orange');
  }
  
  if(priority.val() == 'Normal'){
    newResult.css('color','green');
  }
  
  // append the new div to the list of results
  results.append(newResult);
  
  // clear the input and focus the cursor for the next value to be added
  task.val('').focus();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="task" type="text"/>
<select id="priority">
<option id="Urgent">Urgent</option>
<option id="Critical">Critical</option>
<option id="Normal">Normal</option>
 </select>

<button onclick="add()">Add</button>
<h3>List Result</h3>
<div id="results"></div>

Answer 5

这里应该做的伎俩

function myFunction() {

    var lia = document.createElement("h5");
    var lib = document.createElement("p");


  var item = document.getElementById('task').value;
  var pro = document.getElementById('priority').value;


  var item_list = document.createTextNode(item);
  var item_pro = document.createTextNode(pro);

  lia.appendChild(item_list);
  lib.appendChild(item_pro);
  if(pro=='Urgent'){
    lia.style.color='red';
     lib.style.color='red';  
}else{
  lia.style.color='orange';
     lib.style.color='orange';
}

    document.getElementById("result").appendChild(lia);
  document.getElementById("priorit").appendChild(lib);



document.getElementById('task').value = '';


}

Answer 6

唯一的问题是，您需要p选择所有$("p")元素。您只需选择当前添加的元素，即lib。但是lib是一个javascript变量，所以将它包装在jQuery中以将其转换为jQuery对象，然后应用jQuery css。

e.g。 $(lib).css('color', 'red');

＆＃13;

function myFunction() {
  var lia = document.createElement("h5");
  var lib = document.createElement("p");

  var item = document.getElementById('task').value;
  var pro = document.getElementById('priority').value;

  var item_list = document.createTextNode(item);
  var item_pro = document.createTextNode(pro);

  lia.appendChild(item_list);
  lib.appendChild(item_pro);

  document.getElementById("result").appendChild(lia);
  document.getElementById("priorit").appendChild(lib);

  if (pro == 'Urgent') {
    $(lib).css('color', 'red');
  }
  if (pro == 'Critical') {
    $(lib).css('color', 'orange');
  }
  if (pro == 'Normal') {
    $(lib).css('color', 'green');
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="task" type="text" />
<select id="priority">
  <option id="Urgent">Urgent</option>
  <option id="Critical">Critical</option>
  <option id="Normal">Normal</option>
</select>

<button onclick="myFunction()">Add</button>

<h3>List Result</h3>
<table>
  <th id="result"></th>
  <th id="priorit"></th>
  <table>

＆＃13;

JS-如何根据if语句更改选项颜色

6 个答案: