如何通过 for 循环显示数据库中特定项目的信息？答案

【问题标题】：How to display information for a specific item from a database through a for loop?如何通过 for 循环显示数据库中特定项目的信息？
【发布时间】：2018-09-10 11:50:37
【问题描述】：

我正在使用 web2py 框架，这就是我想要实现的目标；
我的数据库中有不同地方的联系方式，这些不同地方的名称在页面中显示为链接，我想要的是当我在工具提示中显示一个地方的联系方式点击那个地方的链接名称。但这并没有发生！发生的情况是，当我单击地点的名称时，我会得到工具提示，其中不同地点的不同联系信息堆叠在一起！

如上所述，我想要的是当我单击该地点的链接名称时，该地点的联系方式将显示在工具提示中。,任何人都可以帮我解决这个问题。

型号代码

db.define_table('services',
            Field('service_name', requires=IS_NOT_EMPTY()),
           format='%(service_name)s', migrate=False, fake_migrate=True)

db.define_table('company',
            Field('logo', 'upload'),
            Field('company_name', requires=IS_NOT_EMPTY()),
            Field('services', 'reference services'),
            #Field('tlamelo', 'reference tlamelo'),
            Field('product', 'reference product'),
            Field('tel', requires=IS_NOT_EMPTY()),
            Field('email', requires=IS_NOT_EMPTY()),
            Field('fax', requires=IS_NOT_EMPTY()),
            Field('cell', requires=IS_NOT_EMPTY()),
            Field('facebook', requires=IS_NOT_EMPTY()),
            Field('twitter', requires=IS_NOT_EMPTY()),
            Field('website', requires=IS_NOT_EMPTY()),
            Field('postal_address', requires=IS_NOT_EMPTY()),
            Field('located_at', requires=IS_NOT_EMPTY()), migrate=False, fake_migrate=True)

CSS 工具提示代码

#branch1 {outline:none; position: relative; font-weight: bold;}
#branch1 {text-decoration:none;}
span.contacts1
{ 
    display:inline; 
    position:absolute; 
    color:#111; 
    border:1px solid #000000;
    background: #000000; 
    opacity: 0.9; 
    color: white; 
    font-weight: bold; 
    font-size: small; 
    border:1px solid #000000; 
    border-radius: 25px;/*border-radius: 5px 100px 5px;*/
    z-index:1; 
    left: 40px; 
    display:none; 
    padding:14px 15px; 
    margin-top:-56px; 
    margin-left:70px; 
    width:500px; 
    line-height:16px;line-height:20px;
}

控制器代码

def companies():
    results=db.services(request.args(0))
    rslts=db(db.company.services==results.id).select(db.company.ALL, orderby=db.company.company_name)
    return locals()

查看代码

<script>
        $(document).ready(function(){
        $('.branch1').click(function(e) {
            $(this).each(function(){
                $('.contacts1').fadeIn();
            e.preventDefault();
        });
        });
         $('img#close').click(function(e)
         {
             $('.contacts1').fadeOut();
             e.preventDefault();
         });
        });
    </script>


<div class="comps">
<span class="companies">COMPANIES (A-F)</span><br /><br />
{{letters=['A', 'B', 'C', 'D', 'E', 'F']
for company in rslts:
    if company.company_name[0] in letters:
company.company_name
}}

<a href="#" id="branch1" class="branch1 branches">{{=company.company_name}}</a><br />
<span class="contacts1">
<a href="#"><img src="{{=URL('static', 'images/close.png')}}" style="width: 50px; position: absolute; top:0px;right:0px;" id="close"/></a>
<div class="info" id="logo">
   <img id="companyLogo" width="140px" src="{{=URL('download',args=company.logo)}}" /><br />
   <span style="position: absolute; bottom:0px; left: 10px;">SESOA&trade</span>
</div>


<div class="info" style="padding-left:5px; border-left: solid 1px white;" id="details">
    <span class="companyName">{{=company.company_name}}</span>
    <hr class="divider" />
    <span class="contact" id="cell">TEL: </spanM <strongstyle="color:green;">{{=company.tel}}</strong><br />
<span class="contact" id="cell">EM@IL: </span> <strong style="color:green;">{{=company.email}}</strong><br />
<span class="contact" id="cell">CELL: </span><strong style="color:green;">{{=company.cell}}</strong><br />
<span class="contact" id="fb">Facebook: </span>  <strong style="color:green;">{{=company.facebook}}</strong><br />

<span class="contact" id="twit">Twitter: </span> <strong style="color:green;">{{=company.twitter}}</strong><br />
    <a href="{{=company.website}}" target="_blank"><span class="contact" id="e_mail">WEBSITE: </span> <strong style="color:green;">{{=company.website}}</strong></span></a><br />

<span class="contact" id="cell">FAX: </span> <strong style="color:green;">{{=company.fax}}</strong><br />
<span class="contact" id="cell">LOCATION: </span> <strong style="color:green;">{{=company.located_at}}</strong><br />
</div>
</span>

         {{pass}}
        {{pass}}
</div>

点击此链接直接查看问题Contacts Problem Example

【问题讨论】：

标签： python jquery html web2py

【解决方案1】：

在点击处理程序中，联系人通过以下方式显示：

$('.contacts1').fadeIn()

但是，在for 循环中，每个联系人都有一个“contacts1”类，因此上面的选择器会选择所有联系人，以便在单击任何链接时淡入。

相反，您必须为每个联系人添加一个唯一标识符，并在单击其链接时仅选择该联系人。

尝试改变：

<a href="#" id="branch1" class="branch1 branches">{{=company.company_name}}</a><br />
<span class="contacts1">

到：

<a href="#" class="branch1 branches" data-id="{{=company.id}}">{{=company.company_name}}</a><br />
<span class="contacts1" id="{{=company.id}}">

请注意，公司 id 被添加为联系人元素的唯一 id，并且相同的 id 被添加为关联链接的 data-id 属性。

然后，像这样设置点击处理程序：

    $('.branch1').click(function(e) {
        const id = $(this).data('id'); // Extract the data-id attribute of the link.
        $('#' + id).fadeIn(); // Select the contact with that id.
        e.preventDefault();
    });

另外，请注意，在 HTML 页面中，每个 id 属性必须是唯一的，但您在每个循环中重复使用相同的 id 值（即“branch1”、“close”、“logo”） .您甚至可以在循环的单次迭代中多次重复使用“单元”id。尚不清楚您是否需要所有这些 id，但如果您确实需要其中任何一个，请确保它们是唯一的（例如，"{{='branch%s' % company.id}}" 之类的东西）。

【讨论】：