javascript - 在被调用函数中使用对象引用(this)

Question

我重写了这个问题，因为原始问题的部分内容已解决为更简单的解决方案:

我有一个动态创建的表格，其中可能有超过 100 个没有 ID 的表格单元格 ()。单击表格单元格时，将触发 onclick 事件，并进行条件检查以确定这是两次单击系列中的第一次单击还是第二次单击。条件确定设置 2 个隐藏表单字段的哪个值。

现在这是我试图完成的简单部分:onclick，如果是第一次单击，我希望触发该函数的对象的背景颜色为 color1，否则如果是第二次单击，则它将是 color2。

代码:(JSFiddle Here)

CSS

#test tr td {text-align:center; border: thin black solid;}

脚本

<script>
var x = 0;
var click = 0;
function res(zz) {
if (click == 0) {document.getElementById('start').value=zz; click = 1;} else
{document.getElementById('end').value=zz; click = 0;}
}
</script>

HTML

<form action="" method="POST">
<input type="hidden" name="start" id="start" value="">
<input type="hidden" name="end"  id="end" value="">
<input name="submit" type="submit" value="submit" />    
</form>

 <div id="starget"></div>
    <div id="etarget"></div>

    <table width="100%" id="test">
            <thead>
            <tr>
            <th>Tech</th><th>0800</th><th>0900</th><th>1000</th><th>1100</th><th>1200</th>
            </tr>
        </thead>
        <tr>
<td>Bill</td>
<td>XXX</td>
<td onclick="res(0900);"></td>
<td>XXX</td>
<td>XXX</td>
<td onclick="res(1200);"></td>
</tr>
 </table>

如果我希望第一次单击和第二次单击之间的背景颜色相同，则此更改有效:

<td onclick="res(0900);this.style.backgroundColor='green';"></td>

但是下面的方法不起作用，因为调用对象 () 没有将其自身的引用 (this.style....) 传递给函数，但这实际上是我需要它工作的方式，因为我需要条件检查以确定将背景设置为什么颜色:

function res(zz) {
    if (click == 0) {document.getElementById('start').value=zz; click = 1;this.style.backgroundColor='green';} else {document.getElementById('end').value=zz; click = 0;this.style.backgroundColor='red';} }

Answer 1

您只需将“this”传递给函数 res

在这里摆弄:

http://jsfiddle.net/sifriday/r3jaapj5/2/

HTML:

<td onclick="res(0900, this);"></td>

相应的 JS 调整:

function res(zz, el) {
    if (click == 0) {document.getElementById('starget').innerHTML=zz; click = 1; el.style.backgroundColor='green';} else {document.getElementById('etarget').innerHTML=zz; click = 0;}
}