Question

目前我有一个可以根据点击的按钮更改按钮值的工作应用。它是使用javascript编写的（在script.js中）。但是我想让它更好，所以我试图使用jQuery代替。但是，当我将jQuery js和css文件插入index.html时，按钮＆＃39;值已经消失，我不知道如何在不影响其功能的情况下将其完全更改为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中吗？

Answer 1

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

在标记中包含jquery库 <script type="text/javascript" src="static/jquery-1.10.2.min.js"></script>
将document.getElementById（'id'）替换为$（'＃id'）。

document.getElementById（“video_button”）=＆gt; $（ '＃video_button'）
document.getElementById（）之后的任何内容在jquery中有点不同

document.getElementById（“video_button”）。disabled = false; $（ '＃video_button'）removeAttr（ '禁用'）;

document.getElementById（“video_button”）。value =“record video start”; $（'＃video_button'）。val（'record video start'）;

document.getElementById（“image_button”）。onclick = function（）{send_cmd（“im”）;}; $（'＃image_button'）。click（function（）{send_cmd（“im”）;}）;

引用

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

1 个答案: