当在jQuery中切换HTML按钮时，时间戳记不会随着活动的日期时间更新吗？

Question

var timeIn = new Date();

$(".BtnTime1").click(function() { 
    if ($(this).text() == "Green") { 
        $(this).text(timeIn); 
    } else { 
        $(this).text("Green"); 
    }; 
});

var timeOut = new Date();

$(".BtnTime2").click(function() { 
    if ($(this).text() == "Green") { 
        $(this).text(timeOut); 
    } else { 
        $(this).text("Green"); 
    }; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-condensed" border = "1px">
	<thead>
	<tr>
	<td>Time-In Room</td>
	<td>Time-Out Room</td>
	<td>Time Difference</td>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><button class = "BtnTime1 btn-danger btn-block btn-outline-dark">Green</button></td>
	<td><button class = "BtnTime2 btn-danger btn-block btn-outline-dark">Green</button></td>

	<td class = "TimeDiff"><br/></td>
	</tr>
	</tbody> 
	</table>

您好，我有一些jQuery代码调用类“ .BtnTime1，.BtnTime2”，当单击/切换按钮时，它将显示一个时间戳。问题是切换按钮时，时间戳记不会随着活动的日期时间更新。我做错了什么？

非常感谢！

Answer 1

您需要在点击函数中包含timeIn和timeOut值：

$(".BtnTime1").click(function() { 
    if ($(this).text() == "Green") { 
        var timeIn = new Date();
        $(this).text(timeIn); 
    } else { 
        $(this).text("Green"); 
    }; 
});

$(".BtnTime2").click(function() { 
    if ($(this).text() == "Green") { 
        var timeOut = new Date();
        $(this).text(timeOut); 
    } else { 
        $(this).text("Green"); 
    }; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-condensed" border = "1px">
	<thead>
	<tr>
	<td>Time-In Room</td>
	<td>Time-Out Room</td>
	<td>Time Difference</td>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><button class = "BtnTime1 btn-danger btn-block btn-outline-dark">Green</button></td>
	<td><button class = "BtnTime2 btn-danger btn-block btn-outline-dark">Green</button></td>

	<td class = "TimeDiff"><br/></td>
	</tr>
	</tbody> 
	</table>