Question

我有这样的div使用javascript：

<script>
$(document).ready(function(){
    $("#btnmsg-1").click(function(){
        $(".msgid-1").show();
    });
    $("#btnmsg-2").click(function(){
        $(".msgid-2").show();
    });
    $("#btnmsg-3").click(function(){
        $(".msgid-3").show();
    });
    $("#btnmsg-4").click(function(){
        $(".msgid-4").show();
    });
});
</script>

<div>NAME : ABCDEF <button id="btnmsg-1">message</button></div>
    <div class="msgid-1" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : GHIJKL <button id="btnmsg-2">message</button></div>
    <div class="msgid-2" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : MNOPQR <button id="btnmsg-3">message</button></div>
    <div class="msgid-3" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : STUVWX <button id="btnmsg-4">message</button></div>
    <div class="msgid-4" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>

如果我点击按钮id =＆＃34; btnmsg-1＆＃34;然后div class =＆＃34; msgid-1＆＃34;显示，然后我点击按钮id =＆＃34; btnmsg-3＆＃34;然后div class =＆＃34; msgid-3＆＃34;显示但是div class =＆＃34; msgid-1＆＃34;不隐藏或关闭，我的问题如果另一个div打开，如何隐藏div？

Answer 1

不是为每个使用单独的处理程序，而是可以使用元素的相关定位以及类来对它们进行分组以显示/隐藏

即，向所有按钮添加类似btnmsg的类，并向所有必须显示/隐藏的div添加msgedit。现在向.btnmsg元素注册一个点击处理程序，从您的标记中，要显示的.msgedit元素是单击按钮的下一个兄弟，所以显示然后隐藏所有其他.msgedit元素。

$(document).ready(function() {
  var $edits = $('.msgedit')
  $(".btnmsg").click(function() {
    var $this = $(this).parent().next().show();
    $edits.not($this).hide()
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>NAME : ABCDEF
  <button class="btnmsg" id="btnmsg-1">message</button>
</div>
<div class="msgid-1 msgedit" style="display:none;">
  <textarea></textarea>
  <input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : GHIJKL
  <button class="btnmsg" id="btnmsg-2">message</button>
</div>
<div class="msgid-2 msgedit" style="display:none;">
  <textarea></textarea>
  <input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : MNOPQR
  <button class="btnmsg" id="btnmsg-3">message</button>
</div>
<div class="msgid-3 msgedit" style="display:none;">
  <textarea></textarea>
  <input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : STUVWX
  <button class="btnmsg" id="btnmsg-4">message</button>
</div>
<div class="msgid-4 msgedit" style="display:none;">
  <textarea></textarea>
  <input type="submit" name="btnsend" value="Send" />
</div>

Answer 2

请将相同的类添加到类似的元素，然后使用此jQuery代码：

$(document).ready(function(){
    $(".btnmsg").click(function(){
        $(".msgid").hide();
        $(this).parent().next(".msgid").show();
    });
});

查看完整的DEMO工作：https://jsfiddle.net/lmgonzalves/n5f78kqs/

Answer 3

<强> jsBin demo

不要使用msgid-1，msgid-2等...因为它违背了classNames的目的。仅使用msg
同样适用于您的按钮。删除按钮ID。使用班级class="btn"
不要使用内联样式。请改用<style>或拨打外部样式表。

HTML

<div class="btn">
  NAME : ABCDEF <button>message</button>
</div>
<div class="msg">
  <textarea></textarea>
  <input type="submit" name="btnsend" value="Send">
</div>

CSS：

.msg{
  display:none;
}

了解您的代码现在的可读性如何？ jQuery的：

var $msg = $(".msg");                                       // Get all .msg DIVs
$(".btn").on("click", "button", function( e ){
    $msg.hide();                                            // Hide all
    $(e.delegateTarget).next().show();                      // Show next
});

Answer 4

您可以通过在要隐藏的元素上调用hide（）来完成此操作。

例如，您将进行以下更改：

// Old
$("#btnmsg-1").click(function(){
    $(".msgid-1").show();
});

//New
$("#btnmsg-1").click(function(){
    $(".msgid-1").show();
    $(".msgid-2").hide();
    $(".msgid-3").hide();
    $(".msgid-4").hide();
});

更简洁的方法是给你的所有短信提供一条消息＆＃34; class，那么你的onClick处理程序将如下所示：

$("#btnmsg-1").click(function(){
    $("#message").hide();
    $(".msgid-1").show();
});

希望有所帮助！

如果另一个div打开，如何隐藏div使用javascript

4 个答案: