2

这是我的 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 但它不能正常工作

4

5 回答 5

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"));
});
于 2012-05-16T09:27:14.563 回答
1

试试这个：

function toggleDiv(divId) {
    if ($("#"+divId).is(':visible')) {
        $("#common").hide();
    }
    else {
        $("#common").show();
    }
}
于 2012-05-16T09:28:36.617 回答
0

您的代码总是要输入if，而不是else. 您正在评估 的返回值show，它始终是一个 jQuery 对象，其评估结果始终为真。

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

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

附带说明一下，既然您已经在使用它，为什么不将您的事件处理程序代码移出 HTML 并将其与 jQuery 绑定（以下假设您为链接提供了“yourLink”的 ID）：

$("#yourLink").click(function() {
    //Event handler
});
于 2012-05-16T09:26:52.903 回答
0

您正在测试$("#"+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();
}
于 2012-05-16T09:35:53.947 回答
0

试试这个没有单独的功能。

<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>
于 2012-05-16T09:41:44.363 回答