0

我有一个看起来像这样的 li 元素：

<ol id="selectbox">
    <li class="boxes" name="bears">bees</li>
    <li class="boxes" name="cakes">candles</li>
    <li class="boxes" name="wine">beer</li>
    <li class="boxes" name="spoon">fork</li>
    <li class="boxes" name="bench">chair</li>
    <li class="boxes" name="matches">fire</li>
    <li class="boxes" name="kindling">wood</li>
</ol>

当我单击它时，我想将名称“bears”或文本“bees”放入变量中（知道如何同时执行这两种操作会很有帮助）。如何使用 jQuery 选择器做到这一点？我尝试了很多事情，例如

var $radios = $('input[name="mybuttons"]');
$('#selectbox li').click(function(){
  var $btn = $(this).addClass('active');
  var idx = $btn.index();    
  var name = $('li['+idx+']').name();
});

和

var name = $('#li.active').name()

和

var name = $radios.eq(idx).prop('name')

等等

4

4 回答 4

2

使用.text()获取文本

$(this).text()

和.attr('name')获取名称

$(this).attr('name')

小提琴

于 2013-01-09T23:55:53.463 回答
1

您可以$(this)在单击事件上下文中使用它，因为它对应于被单击的元素。

var name = $(this).attr('name');  // bears 

var val = $(this).text();       // bees

代码

$('#selectbox li').click(function(){
  var $this = $(this);
  var $btn = $this.addClass('active');
  var name = $this.attr('name');
  var txt = $this.text();
  console.log("Name Attribute - " + name + " :: Text - "+ txt); 
});

工作小提琴

此外，最好将数据属性用于自定义属性，以便验证文档并符合标准实践。

所以

<li class="boxes" name="bears">bees</li>

应该看起来像

<li class="boxes" data-name="bears">bees</li>

要访问它，您可以使用其中一个.attr()或.data()方法

var name = $this.attr('data-name');
var name = $this.data('name');
于 2013-01-09T23:56:36.493 回答
1

就像这样简单：

$('#myOL li').click(function(){
    $(this).addClass('active');
    var name = $(this).attr('name');
    var text = $(this).text(); 
});
于 2013-01-09T23:58:30.580 回答
1

好，

 $('#selectbox .boxes')

在#selectbox 中返回带有类框的所有元素的数组通过使用jQuery 让您的生活更轻松，您可以这样做

$('#selectbox .boxes').click(function(){
  var tmp_name = $(this).attr('name');
  alert(tmp_name);
  alert($(this).text()); // bees
  alert($(this).html()); // bees
  // changes the attribute name of this li element which has class boxes and has been clicked.
  $(this).attr('name','Hello world!'); 
  // changes the inner html of this li element which has class boxes and has been clicked.
  $(this).html('Hello world!');

})

希望能帮助到你。

于 2013-01-10T00:02:30.927 回答