Javascript 如何嵌套多个jQuery函数，使变量可以访问？

$（“.BtnTime1”）。单击（函数（）{
如果（$（“.BtnTime1”）.text（）=“绿色”）{
var timeIn=parseInt（“122”）；
$（“.BtnTime1”）.text（时间单位）；
}否则{
$（“.BtnTime1”）.text（“绿色”）；
};
$（“.BtnTime2”）。单击（函数（）{
如果（$（“.BtnTime2”）.text（）=“绿色”）{
var timeOut=parseInt（“3231”）；
$（“.BtnTime2”）.text（超时）；
}否则{
$（“.BtnTime2”）.text（“绿色”）；
};
$（“.timeDiff”）.html（timeOut-timeIn）；
});
});

房间里的时间
休息室
时差
绿色
绿色

$（文档）.ready（函数（a）{
var-timeIn；
var超时；
$（“.BtnTime1”）。单击（函数（）{
如果（$（“.BtnTime1”）.text（）=“绿色”）{
timeIn=parseInt（“122”）；
$（“.BtnTime1”）.text（时间单位）；
}否则{
$（“.BtnTime1”）.text（“绿色”）；
};
});
$（“.BtnTime2”）。单击（函数（）{
如果（$（“.BtnTime2”）.text（）=“绿色”）{
超时=parseInt（“3231”）；
$（“.BtnTime2”）.text（超时）；
}否则{
$（“.BtnTime2”）.text（“绿色”）；
};
$（“.timeDiff”）.html（timeOut-timeIn）；
});
});

房间里的时间
休息室
时差
绿色
绿色

$（文档）.ready（函数（a）{
var-timeIn；
var超时；
$（“.BtnTime1”）。单击（函数（）{
如果（$（“.BtnTime1”）.text（）=“绿色”）{
timeIn=parseInt（“122”）；
$（“.BtnTime1”）.text（时间单位）；
}否则{
$（“.BtnTime1”）.text（“绿色”）；
};
});
$（“.BtnTime2”）。单击（函数（）{
如果（$（“.BtnTime2”）.text（）=“绿色”）{
超时=parseInt（“3231”）；
$（“.BtnTime2”）.text（超时）；
}否则{
$（“.BtnTime2”）.text（“绿色”）；
};
$（“.timeDiff”）.html（timeOut-timeIn）；
});
});

房间里的时间
休息室
时差
绿色
绿色
更简洁的方法是在函数外部初始化变量，而不是嵌套函数。为了得到准确的结果，我做了一些修改
还有一件事，在这种情况下最好使用ID而不是类


var timeIn=''；
var超时=“”；
$（“.BtnTime1”）。单击（函数（）{
如果（$（“.BtnTime1”）.text（）=“绿色”）{
timeIn=parseInt（“122”）；
$（“.BtnTime1”）.text（时间单位）；
}否则{
$（“.BtnTime1”）.text（“绿色”）；
};
});
$（“.BtnTime2”）。单击（函数（）{
$（“.timeDiff”）.html（“”）；
如果（$（“.BtnTime2”）.text（）=”绿色“&&（$（“.BtnTime1”）.text（）！=”绿色“）{
超时=parseInt（“3231”）；
$（“.BtnTime2”）.text（超时）；
$（“.timeDiff”）.html（timeOut-timeIn）；
}否则{
$（“.BtnTime2”）.text（“绿色”）；
};
});

房间里的时间
休息室
时差
绿色
绿色
更简洁的方法是在函数外部初始化变量，而不是嵌套函数。为了得到准确的结果，我做了一些修改
还有一件事，在这种情况下最好使用ID而不是类


var timeIn=''；
var超时=“”；
$（“.BtnTime1”）。单击（函数（）{
如果（$（“.BtnTime1”）.text（）=“绿色”）{
timeIn=parseInt（“122”）；
$（“.BtnTime1”）.text（时间单位）；
}否则{
$（“.BtnTime1”）.text（“绿色”）；
};
});
$（“.BtnTime2”）。单击（函数（）{
$（“.timeDiff”）.html（“”）；
如果（$（“.BtnTime2”）.text（）=”绿色“&&（$（“.BtnTime1”）.text（）！=”绿色“）{
超时=parseInt（“3231”）；
$（“.BtnTime2”）.text（超时）；
$（“.timeDiff”）.html（timeOut-timeIn）；
}否则{
$（“.BtnTime2”）.text（“绿色”）；
};
});

房间里的时间
休息室
时差
绿色
绿色
使用html5数据属性存储变量，然后只编写一个函数（保持干燥）怎么样

这是一把小提琴


js

html


房间里的时间
休息室
时差
绿色
绿色
使用html5数据属性存储变量，然后只编写一个函数（保持干燥）怎么样

这是一把小提琴


js

html


房间里的时间
休息室
时差
绿色
绿色
非常感谢谢扎德，这正是我想要的！谢谢非常感谢谢扎德，这正是我想要的！谢谢谢谢你，拜伦！有趣的方法，这是我将来会记住的。谢谢Byran！有趣的方法，这是我将来会记住的。
$('.timeBtn').click(function() {
  $(this).text($(this).text() == 'Green' ? $(this).attr('data-number') : 'Green')
  $("#timeDiff").html($('#Btn2').text() - $('#Btn1').text());
})

<div class="container">
  <div class="row">
    <table class="table">
      <thead>
        <tr>
          <th>Time In Room</th>
          <th>Time out Room</th>
          <th>Time Difference</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <button class="btn btn-primary timeBtn" data-number='122' id="Btn1">Green</button>
          </td>
          <td><button class="btn btn-secondary timeBtn" data-number='3231' id="Btn2">Green</button></td>
          <td id="timeDiff"></td>
        </tr>
      </tbody>
  </div>
</div>
</div>