javascript - 将 javascript 更改为 jquery 时按钮值消失

标签 javascript jquery html css ajax

目前我有一个工作应用程序可以根据单击的按钮更改按钮的值。它是使用 javascript 编写的(在 script.js 中)。但是我想让它更好,所以我尝试改用 jQuery。但是,当我将 jQuery js 和 css 文件插入 index.html 时,按钮的值消失了,我不知道如何在不影响其功能的情况下将其完全更改为 jQuery。

这是原始 javascript 的一部分:(如果您想查看整个脚本,请告诉我)

ajax_status.onreadystatechange = function() {

  if(ajax_status.readyState == 4 && ajax_status.status == 200) {

if(ajax_status.responseText == "ready_vid") {

  document.getElementById("video_button").disabled = false;
  document.getElementById("video_button").value = "record video start";
  document.getElementById("video_button").onclick = function() {send_cmd("ca 1");};
  document.getElementById("image_button").disabled = false;
  document.getElementById("image_button").value = "record image";
  document.getElementById("image_button").onclick = function() {send_cmd("im");};
  document.getElementById("timelapse_button").disabled = false;
  document.getElementById("timelapse_button").value = "timelapse start";
  document.getElementById("timelapse_button").onclick = function() {send_cmd("tl " + (document.getElementById("tl_interval").value*10));};
  document.getElementById("md_button").disabled = false;
  document.getElementById("md_button").value = "motion detection start";
  document.getElementById("md_button").onclick = function() {send_cmd("md 1");};
  document.getElementById("halt_button").disabled = false;
  document.getElementById("halt_button").value = "stop camera";
  document.getElementById("halt_button").onclick = function() {send_cmd("ru 0");};
  document.getElementById("mode_button").disabled = false;
  document.getElementById("mode_button").value = "change mode to image";
  document.getElementById("mode_button").onclick = function() {send_cmd("pm");};
  halted = 0;
}
else if(ajax_status.responseText == "ready_img") {
  document.getElementById("video_button").disabled = true;
  document.getElementById("video_button").value = "record video start";
  document.getElementById("video_button").onclick = function() {};
  document.getElementById("image_button").disabled = false;
  document.getElementById("image_button").value = "record image";
  document.getElementById("image_button").onclick = function() {send_cmd("im");};
  document.getElementById("timelapse_button").disabled = false;
  document.getElementById("timelapse_button").value = "timelapse start";
  document.getElementById("timelapse_button").onclick = function() {send_cmd("tl " + (document.getElementById("tl_interval").value*10));};
  document.getElementById("md_button").disabled = true;
  document.getElementById("md_button").value = "motion detection start";
  document.getElementById("md_button").onclick = function() {};
  document.getElementById("halt_button").disabled = false;
  document.getElementById("halt_button").value = "stop camera";
  document.getElementById("halt_button").onclick = function() {send_cmd("ru 0");};
  document.getElementById("mode_button").disabled = false;
  document.getElementById("mode_button").value = "change mode to video";
  document.getElementById("mode_button").onclick = function() {send_cmd("vm");};
  halted = 0;
}

index.html 中的 HTML:

<input id="video_button" type="button">
<!--<button data-role="none" id="video_button"></button>
<button class="ui-btn ui-btn-inline" id="image_button"></button> //this is wad i tried-->
  <input id="image_button" type="button">
  <input id="timelapse_button" type="button">
  <input id="md_button" type="button"><br>
  <input id="halt_button" type="button">
  <input id="mode_button" type="button">

我在 index.html 中有一些其他的 jQuery 脚本。上面的 javascript 在另一个名为 script.js 的文件中。我的问题是,我是否还要在该 script.js 中插入 jQuery.js 的链接? $(document).ready(function() 怎么样?我也把它放在 script.js 里了吗?

最佳答案

对于最小的更改,您可以执行以下操作,

  1. 在标记中包含 jquery 库作为 <script type="text/javascript" src="static/jquery-1.10.2.min.js"></script>

  2. 将 document.getElementById('id') 替换为 $('#id')。

    document.getElementById("video_button") => $('#video_button')

  3. document.getElementById() 之后的任何东西在 jquery 中都变得有点不同

    document.getElementById("video_button").disabled = false; $('#video_button').removeAttr('禁用');

    document.getElementById("video_button").value = "录制视频开始"; $('#video_button').val('录制视频开始');

    document.getElementById("image_button").onclick = function() {send_cmd("im");}; $('#image_button').click(function() {send_cmd("im");});

引用资料

关于javascript - 将 javascript 更改为 jquery 时按钮值消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22469186/

相关文章:

javascript - html5 不支持 mathML 平方根和阶乘

jquery - 获取 DataTable 中的所有行,包括过滤掉的行

jquery函数返回数组中的json值

jquery - 更改 Bootstrap 条纹表单行的颜色

javascript - 使用 TABS 时 DataTable.js 无法正确加载

javascript - 如何触发tab键按钮事件?

javascript - 使用 Newtonsoft、C# 反序列化 JSON 时出错

jquery - 如何添加动画来像微调器一样更改倒计时边框的颜色?

html - 如何关闭 PrismJS CSS 主题中的文本阴影?

javascript - 默认光标在 IE 和 Mozilla 中不起作用