Question

我正在构建一个应用程序，允许将任务添加到列表中，并根据所做的选择更改它们的颜色。

我用它来建立一个项目列表，现在我怎么能实现这样的事情http://s4.postimg.org/npplicbnh/2222.png

这是@Narawa Games帮助我的.append代码。但是，无论何时添加新项目，它都会将之前添加的其他项目的颜色更改为相同的颜色。我希望能够有不同颜色的不同物品。

if ( valid ) {
    $( "#tasks2 tbody" ).append("\<div class='taskList'><ul class='taskScreen2'><tr>" 
    + "<td><h1>"  
    + type.val() 
    + "</h1></td>"
    +"<td class='title'><h3>"
    +  title.val() 
    + " </td>"  
    +"<td>"
    + wordcount.val() 
    + "</h3></td>"  
    +"<td><p>"
    +  description.val() 
    + "</p></td>"  
    + "<td>"
    + deadline.val() 
    + "</td>"
    + "</tr></ul></div>"
    +"<script>var typeSUP=$('#type').val();var taskS=$('.taskList');if(typeSUP=='Dissertation'){taskS.css('border-color', 'red');}else if (typeSUP=='Report'){taskS.css('border-color', 'blue');}\
");

这是一个小例子 - https://jsfiddle.net/ynwLykpk/

欢迎所有帮助。干杯

Answer 1

假设您要设置刚添加的表格行的样式，并保持其他人不受影响，请尝试：

function Next() {
  thisMarker++;
  if (thisMarker>=fotoCount) {thisMarker=0};
  // following line not working
  google.maps.event.trigger(markers[thisMarker], 'click');
}
function Previous() {
  thisMarker--;
  if (thisMarker==0) {thisMarker=fotoCount-1};
  // following line not working
  google.maps.event.trigger(markers[thisMarker], 'click');
}

整理，因为将if ( valid ) { var $task = $("<tr class='taskList'>" + "<td><h1>" + type.val() + "</h1></td>" + "<td class='title'><h3>" + title.val() + "</h3></td>" + "<td>" + wordcount.val() + "</td>" + "<td><p>" + description.val() + "</p></td>" + "<td>" + deadline.val() + "</td>" + "</tr>" ).appendTo("#tasks2 tbody"); switch($('#type').val()) { case 'Dissertation': $task.css('border-color', 'red'); break; case 'Report': $task.css('border-color', 'blue'); break; default: $task.css('border-color', 'green'); } }附加到<div><ul><tr>...</tr></ul></div>元素是无稽之谈。

编辑以响应@Tushars评论

或者，编写默认的CSS指令和每个任务类型：

tbody

然后通过将适当的类应用于行来设置行的样式：

.taskList {
    border-color: green;
}
.taskList.Dissertation {
    border-color: red;
}
.taskList.Report {
    border-color: blue;
}

使用jQuery对话框更改每行的颜色.append

1 个答案: