javascript - 试图获取列表项的值和文本

Question

我有多个具有包含 Urls 的值属性的列表项。我正在尝试捕获包含单击事件中的每个列表项的 Url 和 Text。当我单击列表项时没有任何反应。

<ul id="expList" class="list">
<li value="https://hosted.demo.ca" class="collapsed expanded">Sharepoint Demo Website</ul>
<li value="https://hosted.demo.ca/academic" class="collapsed active">Academic
<ul style="display: none;"><li value="https://hosted.demo.ca/academic/bm">Board Meetings</li><li value="https://hosted.demo.ca/academic/cmtte">Committee</li>
<li value="https://hosted.demo.ca/academic/dm">Document Management</li>
<li value="https://hosted.demo.ca/academic/pm">Project Management</li>
</ul>

如果有帮助的话，带有完整 HTML 的 JsFiddle http://jsfiddle.net/6yXV6/

我的代码：

site = $('#expList');
site.on('click','li',function(){
  siteUrl =  $(this).attr('value');
  siteName = $(this).text();
  console.log(siteUrl);
  console.log(siteName);
  RefreshSiteLists();
});

我已经使用此代码使此列表展开和折叠，它是否会以某种方式发生冲突：

function prepareList() {
  $('#expList').find('li:has(ul)')
    .click( function(event) {
      if (this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
      }
      return false;
    })
    .addClass('collapsed').children('ul').hide();

        //Create the button functionality
    $('#expandList').unbind('click').click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    });
    $('#collapseList').unbind('click').click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    });
  };

$(function() {
   $("#expList li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

编辑：我想你们中的大多数人已经回答了我的问题，并且我的代码中还有其他东西阻止它运行。因此，一旦我缩小范围，我可能会发布另一个与此相关的问题。

Answer 1

简而言之，您的问题是单击$(this)an 时有两个上下文条目li，这是因为嵌套li在另一个中，您可以看到，如果您执行 a console.log($(this))，因此解决方案是添加一个事件停止器：event.stopImmediatePropagation();阻止这种情况发生并且代码将是这样的：

 site = $('#expList');
  site.on('click','li',function(event){
  event.stopImmediatePropagation();
  siteUrl =  $(this).attr('value');
  siteName = $(this)[0].childNodes[0];
  console.log(siteUrl);
  console.log(siteName);
});

顺便说一句，就像@user1671639 所说，html 结束标签有问题，应该是：

    <ul id="expList" class="list">
      <li value="https://hosted.demo.ca" class="collapsed expanded">
        Sharepoint Demo Website
        <ul id='#internal' style="display: block;">
          <li value="https://hosted.demo.ca/academic" class="collapsed active">
            Academic
          </li>
          <li value="https://hosted.demo.ca/academic/bm">Board Meetings</li>
          <li value="https://hosted.demo.ca/academic/cmtte">Committee</li>
          <li value="https://hosted.demo.ca/academic/dm">Document Management</li>
          <li value="https://hosted.demo.ca/academic/pm">Project Management</li>
        </ul>
       </li>
     </ul>

Answer 2

您可以试试这个，这将获得您单击的此列表项，并显示该列表中的值和文本。

$("li").click(function(){
    if(this.id != 'myList')
    {
        siteUrl =  $(this).attr('value');
        siteName = $(this).text();
        console.log(siteUrl);
        console.log(siteName);
    }

    else
    {
        siteUrl =  $(this).attr('value');
        siteName = $(this).clone().children().remove().end().text();
        console.log(siteUrl);
        console.log(siteName);
    }
    return false;
});

jsFiddle 演示（使用 console.log）

jsFiddle 演示（使用警报）

Answer 3

实际问题出在您的html. 更好地验证它。

1）不正确的标签关闭

<li value="https://hosted.demo.ca" class="collapsed expanded">Sharepoint Demo Website</ul>
<li value="https://hosted.demo.ca/academic" class="collapsed active">Academic
...........

JSFiddle