Question

我是javascript的新手，我需要一些帮助。我正在开发一个网站，其中我有一个buttton nemed“添加治疗笔记”。

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;
  }

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

谢谢

Answer 1

由于您使用jQuery标记了问题，因此您可能需要查看jQuery的toggle()，show()，hide()，text()和{{3} } 功能。这可能会让你开始。如果您要分享一些代码，请随时回来询问更详细的问题。

Answer 2

你可以用这个

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

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

我会留下一个练习让自己输入一个if statemetn来检查你应该将文本设置为

Answer 3

给按钮一个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');
    }
});
});

Javascript onclick显示/隐藏div元素

3 个答案: