0

我是 javascript 新手，我需要一些帮助。我正在开发一个网站，其中有一个名为“添加治疗说明”的按钮。

1.如果我点击“添加治疗说明”，相应的两个<div>应该打开，如果<div>处于打开状态，“添加治疗说明”按钮应该将文本更改为“隐藏治疗说明”。

  <div id="divpopup"><button>Add treatment notes</button></div>

2.如果点击“隐藏治疗笔记”，两个div的数据应该是隐藏的。

<td class="ir-shade4" colspan="2">
    <div id=irid1><p><em>If injured,mark location</em></p>
    <img src="{{ STATIC_URL }}images/spotmarker.jpeg"/></div>
 </td>
 <td class="ir-shade3" colspan="2">
  <div id=irid2><p>Actions</p>
   <p><input id="ir-box" type="checkbox"/>01.Allowed to rest and returned to class</p>
   <p><input id="ir-box" type="checkbox"/>02.Contacted parents/guardians</p>
   <p><strong><em>Treatment given,or other notes</em></strong></p>
   <textarea class="textarea" name="description"></textarea>
   <p><input id="ir-box2" type="checkbox"/>No furthur action needed</p>
   </div>
   </td>

编辑：

$(document).ready(function () {
  $("#divpopup").css("display", "none");
});

function addtreatment() {
  var hideValue = $("#irid1").val();
  var hideValue = $("#irid2").val();
  var newHideValue = 0;
    if (hideValue == 0) {
      newHideValue = 1;
      }
      else 
      {
        newHideValue = 0;
      }
    if (newHideValue == 0) {
      $("#divpopup").css("display", "none");
    }
    else 
    {
      $("#divpopup").css("display", "block");
    }
    $("#irid1").val(newHideValue);
    $("#irid2").val(newHideValue);

    return false;
  }

请告诉我如何在我的页面中实现这一点。

谢谢

4

3 回答 3

2

你可以用这个

$('#divpopup').click(function()
 {
   $('.ir-shade4').toggle();
   $('.ir-shade3').toggle();
}

然后使用$('#divpopup').text('Hide treatment notes');

我将把它留给你自己做一个练习，放入一个 if 语句来检查你应该将文本设置为什么

于 2013-04-17T05:07:21.570 回答
2

由于您用 标记了您的问题jQuery，您可能想要查看 jQuery 的、toggle()、show()和hide()函数。这可能会让你开始。当您有一些代码要分享时，请随时回来询问更详细的问题。text()click

于 2013-04-17T05:05:40.730 回答
1

给按钮一个 id 让我们说

<button id="test">Add treatment notes</button>

然后

$(document).ready(function(){

$("#test").click(function(){
    $("#irid1").toggle();
    $("#irid2").toggle();
    if ($("#irid1").is(":visible")) {
        $("#test").html('Hide treatment notes');
    } else {
        $("#test").html('Show treatment notes');
    }
});
});
于 2013-04-17T05:09:36.660 回答