Django + Jquery + Tabs，点击时标签不显示答案

【问题标题】：Django + Jquery + Tabs, tab not displaying on clickDjango + Jquery + Tabs，点击时标签不显示
【发布时间】：2014-09-05 23:00:11
【问题描述】：

当函数传递 onClick 时，我试图在函数内部设置一个 javascript 值，然后我希望我的函数将点击目标的 id 保存到 var，这样我就可以在该对象上调用 .show基于其返回的 javascript var id。

这是我输出列表链接的方式：

{%for stat in ip_new_list %}                        
    {% if 'Newip' in stat%}
        <li class="active"><a href onClick="showTable();" id='{{stat.1}}'>{{stat.1}} </a></li>
    {%endif%}
{%endfor%}                              
</ul>

我使用以下代码隐藏了所有带有类名的选项卡：

$(document).ready(function(){
        $('#loading').hide();
        $('#helppage').hide();
        $('.iptable').hide();  
    });

这是我的代码，用于显示带有点击链接 ID 的 div 标签，我已验证 div 标签 ID 与该格式的“100.000.000.000”IP 地址的链接 ID 匹配。

function showTable(clicked){
    console.log("ShowTableClicked");
    console.log(clicked.id);
    var clickedID = "#" + clicked.id;
    $(clickedID).show();
    console.log(clickedID);
}

这是我的 django/html 代码：

<ul>
{%for stat in ip_new_list %}                        
    {% if 'Newip' in stat%}
        <li class="active" id={{stat.1}}><a href='#' onClick="showTable(this);" id={{stat.1}}>{{stat.1}}</a></li>
    {%endif%}
{%endfor%}                              
</ul> 


{%for stat in ip_new_list %}
        {% if 'Break' in stat%}
                </div> <div id="{{stat.1}}"  class='iptable'>
        {%endif%}

        {% if 'First' in stat%}
                <div id="{{stat.1}}" class='iptable'>
        {%endif%}


            {{stat.0}} | {{stat.1}} | {{stat.2}} <br>

{%endfor%}

这是控制台输出：

"ShowTableClicked" ipreport:56
"000.000.000.000" ipreport:57
"#000.000.000.000"

但是 div 标签仍然没有出现，我使用调试和检查器来验证 div 标签是否具有正确的 ID。如果您能找出原因，请告诉我。

【问题讨论】：

$('#' + clickedID).show();

标签： javascript jquery html django

【解决方案1】：

您的问题出在 jQuery 选择器行中 - $("#" + clickedID).show();

在 jQuery 中按 ID（和 CSS，顺便说一句）选择元素以 # 开头。

更多信息在这里： http://api.jquery.com/id-selector/

【讨论】：

这不是解决方案，因为我已经在做它的修改版本但它不起作用。

【解决方案2】：

这是正确的工作答案。我不得不将链接添加到链接的 id，因为它没有找到 div 标签，因为它们都具有该 id，并且它正在更改样式或两者兼而有之，因此为了解决该问题，我只是附加了单词 link 并删除了使用 .replace 效果很好。现在是时候设计样式和使用淡入淡出而不是显示了。

感谢您的所有帮助。

{%for stat in ip_new_list %}                        
    {% if 'Newip' in stat%}
        <a href='#' onClick="showTable(this);" id="{{stat.1}}link">{{stat.1}}</a>
    {%endif%}
{%endfor%}                              



<div class="table-responsive">
{%for stat in ip_new_list %}
        {% if 'Break' in stat%}
                </tbody></table></div> <div id="{{stat.1}}" class='iptable'> <table class="table" id='table-data'> <tbody>
        {%endif%}   
        {% if 'First' in stat%}
                <div id="{{stat.1}}" class='iptable'><table class="table" id='table-data'><tbody>
        {%endif%}       

        {% if 'Break' in stat%}
        {%else%}
            {% if 'First' in stat%}
                {%else%}
            <tr>
                <td>{{stat.0}}</td>
                <td>{{stat.1}}</td>
                <td>{{stat.2}}</td>         
            </tr>
        {%endif%}
        {%endif%}

{%endfor%} 

</div>

在页面底部添加了脚本并将其更改为这个。

<script>


function showTable(clicked){
    $(".iptable").hide();
    var id = clicked.id
    id = id.replace('link', '');
    console.log(id);
    document.getElementById(id).style.display = "block";
}

</script>

【讨论】：