我的显示/隐藏功能代码出了什么问题

What's wrong in my code for show/hide function?

本文关键字：什么 问题 代码 功能 显示 隐藏 我的      更新时间：2023-09-26

这是我的HTML和javascript代码：

.HTML： 

<div id="common">
    Hi Welcome
</div>
<div>
    <a href="javascript:toggleDiv('customize');" >click here</a>
</div>
<div  id="customize">
    <form action="" method="post" id="MyForm">
        {%  form%}
    </form>
</div>

Javascript代码：

<script>
    function toggleDiv(divId) {
        if ($("#"+divId).show()) {
            $("#common").hide();
        }
        else {
            $("#common").show();
        }
    }
</script>

如果我单击链接"单击此处"，则应隐藏一个div id，并显示另一个div id，如果我单击另一个时间，则应该发生反之亦然的过程。 我尝试使用此JavaScript，但它无法正常工作

您需要使用 :visible 来检查传递的div 是否已经可见。试试这个：

function toggleDiv(divId) {
    var $el = $("#" + divId);
    if ($el.is(":visible")) {
        $el.hide();
        $("#common").hide();
    }
    else {
        $el.show();
        $("#common").show();
    }
}

您还应该更改代码以使用 jQuery 来附加事件，而不是笨拙的 onclick 属性：

<a href="#" id="link" data-rel="other-div">click here</a>

$("#link").click(function(e) {
    e.preventDefault();
    toggleDiv($(this).data("other-div"));
});

试试这个： 

function toggleDiv(divId) {
    if ($("#"+divId).is(':visible')) {
        $("#common").hide();
    }
    else {
        $("#common").show();
    }
}

你的代码总是会进入if，而不是else。您正在计算 show 的返回值，该返回值始终是一个 jQuery 对象，其计算结果将始终为 true。

使用 is 方法和:visible选择器检查元素当前是否可见：

function toggleDiv(divId) {
    if ($("#"+divId).is(":visible")){
        $("#common").hide();
    }
    else{
        $("#common").show();
    }
}

作为旁注，为什么不将事件处理程序代码移出 HTML 并将其与 jQuery 绑定，因为您已经在使用它（以下假设您为链接提供 ID "yourLink"）：

$("#yourLink").click(function() {
    //Event handler
});
<</div> div class="answers">

您正在测试 $("#"+divId) 我应用 jQuery .show（） 方法的可见性！

你应该做的是像这样用 ：visible 测试可见性：

if ($("#"+divId).is(":visible")) {...}

所以你的函数应该变成：

function toggleDiv(divId) {
    if ($("#"+divId).is(":visible")){
        $("#common").hide();
    }else{
        $("#common").show();
    }
}

但是，如果你只需要切换元素的当前显示状态，你可以使用 .toggle（），如下所示：

function toggleDiv(divId) {
  $("#"+divId).toggle();
}

尝试一下，不要使用单独的函数。

<div id="common">
      Hi Welcome
</div>
<div>
<a onClick="$('#customize').toggle()" >click here</a>
</div>
<div  id="customize">
  <form action="" method="post" id="MyForm">
        Content
  </form>​​​​​​

不显眼的奖励积分示例：

<div id="common">
      Hi Welcome
</div>
<div>
<a data-linkedId="customize" >click here</a>
</div>
<div  id="customize">
  <form action="" method="post" id="MyForm">
        Content
  </form>​​​​​​
<script type="text/javascript">
$(document).ready(){
    $('a[data-linkedId]').on('click',function(){
        var divId = $(this).attr('data-linkedId');
        $('#'+divId).toggle();
    });
}
</script>
相关文章：