Question

我正在使用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 TOOLTIP代码

#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

Answer 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已添加为contact元素的唯一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”， “商标”）。您甚至可以在循环的一次迭代中多次重复使用“单元” id。尚不清楚您是否甚至需要所有这些id，但如果确实需要它们中的任何一个，请确保它们是唯一的（例如，类似"{{='branch%s' % company.id}}"之类的东西）。

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

1 个答案: