1

我有一个列表，其中包含具有值（站点 URL）的 li 项，并且在列表项内，跨度内的站点名称。我有全局变量 site、siteUrl 和 siteName 并准备好文档上的值。我不知道为什么，但我可以让 siteUrl 返回单击列表项的值，而不是 siteName，它是跨度内的文本。我不确定如何在单击项目的范围内获取文本。

JS：

siteUrl = null;
$("#expList li").click(function(){
    if(this.id != 'myList'){
        siteUrl =  $(this).attr('value');
        siteName = $(this).text();
        RefreshSiteInfo();
    }else{
        siteUrl =  $(this).attr('value');
        siteName = $(this).clone().children().remove().end().text();
        RefreshSiteInfo();
    }
    return false;
});

HTML：

    <ul id="expList" class="list"><li value="https://hosted.compulite.ca" class="collapsed expanded">
<span class="siteTitle">Sharepoint Demo Website</span>
<ul style="display: block;">
<li value="https://hosted.compulite.ca/academic" class="collapsed expanded"><span class="siteTitle">Academic</span>
<ul style="display: block;">
<li value="https://hosted.compulite.ca/academic/bm"><span class="siteTitle">Board Meetings</span></li>
<li value="https://hosted.compulite.ca/sandbox/trial"><span class="siteTitle">Trial</span></li>
</ul>
</li>
<li value="https://hosted.compulite.ca/service"><span class="siteTitle">Service</span></li>
<li value="https://hosted.compulite.ca/testing"><span class="siteTitle">DemoTesting</span></li>
<li value="https://hosted.compulite.ca/training"><span class="siteTitle">Training</span></li></ul>
</li>
</ul>
4

4 回答 4

1 
$(this).children('span').eq(0).text()
于 2013-10-27T19:56:15.373 回答
0

演示

HTML：

<ul id="expList" class="list">
    <li data-value="https://hosted.compulite.ca" class="collapsed expanded">
        <span class="siteTitle">Sharepoint Demo Website</span>
        <ul style="display: block;">
            <li data-value="https://hosted.compulite.ca/academic" class="collapsed expanded">
                <span class="siteTitle">Academic</span>
                <ul style="display: block;">
                    <li data-value="https://hosted.compulite.ca/academic/bm">
                        <span class="siteTitle">Board Meetings</span>
                    </li>
                    <li data-value="https://hosted.compulite.ca/sandbox/trial">
                        <span class="siteTitle">Trial</span>
                    </li>
                </ul>
            </li>
            <li data-value="https://hosted.compulite.ca/service">
                <span class="siteTitle">Service</span>
            </li>
            <li data-value="https://hosted.compulite.ca/testing">
                <span class="siteTitle">DemoTesting</span>
            </li>
            <li data-value="https://hosted.compulite.ca/training">
                <span class="siteTitle">Training</span>
            </li>
        </ul>
    </li>
</ul>

问：

var siteUrl  = '',
    siteName = '';

$("#expList li").click(function ( e ) {
    e.stopPropagation();
    e.preventDefault();
    siteUrl = $(this).data('value');
    siteName = $(this).text();
    alert(siteUrl+' '+siteName);
    // RefreshSiteInfo();
});
于 2013-10-27T20:05:36.127 回答
0

value 不是容器内li元素的有效属性。ul为此，您需要使用属性data-*并使用jQuery 的data()方法提取数据：

...
<li data-value="foo" class="..." ...>...</li>
...

...
siteUrl =  $(this).data('value');
...
于 2013-10-27T19:53:09.517 回答
0

由于用户只能单击其中的文本，因此<span>您可能会从传递给您的函数的事件对象中引用它：

siteUrl = null;
$("#expList li").click(function(event){
    if(this.id != 'myList'){
        siteUrl =  $(this).attr('value');
        siteName = $(event.target).text();
        RefreshSiteInfo();
    }else{
        siteUrl =  $(this).attr('value');
        siteName = $(this).clone().children().remove().end().text();
        RefreshSiteInfo();
    }
    return false;
});
于 2013-10-27T19:55:10.087 回答