Question

我继承了Bootstrap的按钮组，我希望将其整合到一个网站作为我的顶级导航栏。

<div id='nav-bar' class="btn-group btn-group-justified" data-toggle="buttons">
   <label class="btn btn-sm btn-primary">
      <img src='images/icon1.png'>
      <input type="radio" class='nav-button'>Button One
   </label>
   <label class="btn btn-sm btn-primary">
      <img src='images/icon2.png'>
      <input type="radio" class='nav-button'>Button Two
   </label>
</div>

渲染和功能本身还可以，虽然渲染按钮组似乎有很多种方法，但我知道这是我必须这样做的方式。

所以我在标签上放置了一个'委托'偶数处理程序。为什么标签？似乎这是生成任何点击事件的唯一元素。如果我尝试在图像或输入上设置它，无论我在哪里点击，我都不会得到任何事件。

$(document).on('click', '#nav-bar label', function() {
   var text1 = $(this).text();
   console.log("Text 1: " + text1);
   var text2 = $(this).find('nav-button').text();
   console.log("Text 2: " + text2);
   var text3 = $(this, 'nav-button').text();
   console.log("Text 3: " + text3);
});

所以将偶数设置到标签上，它可以工作。

但无论我尝试什么，我似乎无法获得输入元素本身的文本。我用它得到了很多垃圾，我不确定它是否是其他元素或垃圾到底是什么。

当我将其输出到控制台时，如上所示，我得到的结果如下：

Text #: 

      Button One
            (another blank line here)

如果我尝试设置我想在此处理程序中执行的window.location.hash，我会得到类似的内容：

http://host/context/#%0A      %0A      Button One%0A

％0A是新行（NL）还是换行（LF）字符？这垃圾来自哪里？我如何只定位输入元素？

Answer 1

如果您有标签的事件处理程序，则可以使用.find()找到其中的元素。

$(document).on('click', '#nav-bar label', function() {
    var img = $(this).find("img");
    var input = $(this).find("input");
});

由于无线电输入没有自己的文本，因此不清楚您实际想要完成的是什么。您在单选按钮旁边显示的文本只是标签中的一些文本。它不是单选按钮本身的一部分。如果你想获得那个文本，最简单的方法是把它放在这样的范围内：

<div id='nav-bar' class="btn-group btn-group-justified" data-toggle="buttons">
   <label class="btn btn-sm btn-primary">
      <img src='images/icon1.png'>
      <input type="radio" class='nav-button'><span class="radioText">Button One</span>
   </label>
   <label class="btn btn-sm btn-primary">
      <img src='images/icon2.png'>
      <input type="radio" class='nav-button'><span class="radioText">Button Two</span>
   </label>
</div>

然后，您可以从标签事件处理程序中获取它，如下所示：

$(document).on('click', '#nav-bar label', function() {
    var radioText = $(this).find(".radioText").text();
});

工作演示：http://jsfiddle.net/jfriend00/ByR7n/

Answer 2

你应该找到确切的文本节点才能得到你想要的东西，试试这个：

$(document).on('click', '#nav-bar label', function() {
   var text1 = $(this).text();
   var txt = $(this.childNodes).filter(function(index,node){return node.nodeType==3;}).text();
   console.log(txt);
});

Answer 3

尝试

$(document).on('click', '#nav-bar label', function() {
  var text1 = $.trim($(this).text());
  console.log("Text 1: " + text1);

  var text2 = $.trim($(this).find('nav-button').text());
  console.log("Text 2: " + text2);

  var text3 = $.trim($(this, 'nav-button').text());
  console.log("Text 3: " + text3);
});

如何从on（）处理程序中查找元素

3 个答案: