Question

我有一些非常奇怪的事情，我无法弄清楚。

每当我有像

这样的行

<tr class="bold-and-caps">
    <td>Score</td>
    <td>Partner planning</td>
    <td><input type="text" class="completeness avg" value="0.0" disabled="disabled"></td>
     <td><div class="readiness-circle"></div></td>
</tr>

由$score_row选中，我想更改value的{{1}}和input的CSS background-color。我跑

.readiness-circle

这是有效的。

然后我跑

$score_row.find('input.completeness').val(average);

并且它不起作用，事实上$score_row.find('.readiness-circle').css('background-color', newcolor);没有选择任何东西。我想知道运行$score_row.find('.readiness-circle')是否会以某种方式搞砸自身的背景？我很困惑......

编辑：地狱发生了什么？如果$score_row.find('input.completeness').val(average)代替.remove()，则会将其删除。所以它与选择器没有关系。

Answer 1

如果div没有内容，则不会显示背景颜色。下面我有两行，一行有一个空格，一行没有。设置颜色仅影响具有内容的颜色。

var $score_row = $("tr");
average = 80;
newcolor = "yellow";

$score_row.find('input.completeness').val(average);
$score_row.find('.readiness-circle').css('background-color', newcolor);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="bold-and-caps">
    <td>Score</td>
    <td>Partner planning</td>
    <td><input type="text" class="completeness avg" value="0.0" disabled="disabled"></td>
     <td><div class="readiness-circle"></div></td>
</tr>
<tr class="bold-and-caps">
    <td>Score</td>
    <td>Partner planning</td>
    <td><input type="text" class="completeness avg" value="0.0" disabled="disabled"></td>
     <td><div class="readiness-circle">&nbsp;</div></td>
</tr>  
</table>

Answer 2

<!DOCTYPE html>
<html lang="en">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

<script>
    $(document).ready(function () {


        $('tr.bold-and-caps').click(function () {
            $(this).find('.completeness').val('1111111');
            $(this).find('.readiness-circle').css('background-color', 'red');
        });
    });


</script>



<body>

   <table>
<tr class="bold-and-caps">
    <td>Score</td>
    <td>Partner planning</td>
    <td><input type="text" class="completeness avg" value="0.0" disabled="disabled"></td>
     <td><div class="readiness-circle">hello</div></td>
</tr>
<tr class="bold-and-caps">
    <td>Score</td>
    <td>Partner planning</td>
    <td><input type="text" class="completeness avg" value="0.0" disabled="disabled"></td>
     <td><div class="readiness-circle">hello</div></td>
</tr>  
</table>
</body>
</html>

为什么选择不正确呢？

2 个答案: