Question

这是我的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应该隐藏，另一个应该显示，如果我点击它另一次反之亦然的过程应该发生。我尝试使用这个JavaScript，但它没有正常工作

Answer 1

您需要使用: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"));
});

Answer 2

试试这个：

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

Answer 3

您的代码始终会输入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
});

Answer 4

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

您应该做的是使用:visible测试可见性，如下所示：

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

所以你的功能应该变成：

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

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

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

Answer 5

尝试此操作时没有单独的功能。

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

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

5 个答案: