Question

我试图在函数传递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();  
    });

这是我的代码，用于显示div标签以及所点击链接的ID，我已经验证了div标签ID与链接ID匹配是＆＃39; 100.000.000.000＆＃39;该格式的IP地址。

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标签仍然没有出现我使用debug和inspector验证div标签是否有正确的ID。如果你能弄清楚原因，请告诉我。

Answer 1

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

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

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

Answer 2

这是正确的工作答案。我不得不添加链接ID的链接，因为它没有找到div标签，因为它们都有那个id，它正在改变样式或两者都有，所以为了解决这个问题，我只是附加了单词链接并删除了使用.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>

Django + Jquery + Tabs，单击时不显示选项卡

2 个答案: