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

Question

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

如上所述，我想要的是当我单击该地点的 link 名称时，该地点的详细联系信息将显示在工具提示中.，谁能帮我解决这个问题。

型号代码

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>

点击此link第一手查看问题Contacts Problem Example

Answer 1

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

$('.contacts1').fadeIn()

但是在for循环中，每个联系人得到一个"contacts1"class，所以上面的select或selects所有的联系人每当单击 link 时淡入。

相反，您必须为每个联系人添加一个唯一标识符，并且 select 只有在单击 link 时才添加该联系人。

尝试更改：

<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 作为关联 link 的 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"）。您甚至可以在循环的单次迭代中多次重复使用 "cell" id。目前还不清楚你是否需要所有这些 id，但如果你确实需要它们中的任何一个，请确保它们是唯一的（例如，像 "{{='branch%s' % company.id}}"）。

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

How to display information for a specific item from a database through a for loop?

python

jquery

html

web2py