试图获取列表项的值和文本[关闭]

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>

JsFiddle 带有完整的 HTML，如果有帮助的话 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

你可以试试这个，这将得到你点击的这个列表项，并显示该列表中的值和文本。

$("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 Demo (using console.log)

jsFiddle Demo (using alert)

Answer 2

实际问题出在您的 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

Answer 3

简而言之，您的问题是 $(this) 在单击 li 时有两个上下文条目，这是因为将 li 嵌套在另一个中，您可以看到如果您执行 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>