Question

以下是代码：

HTML：

<div class="toggle">
    <a href="#" class="active">5</a>
    <a href="#" class="">10</a>
    <a href="#" class="">25</a>
    <a href="#" class="">50</a>
</div>

<span class="result"></span>

JS：

$('.toggle a').click(function(){
    $('.toggle a').removeClass('active');
    $(this).closest('a').addClass('active');
    $('.result').html('???');

});

的CSS：

.active {
    color: red;}

当我按'a'时，我如何显示它将显示当前'a'的数字。

Answer 1

我认为这会为你解决问题：

$('.toggle a').click(function(){
    $('.toggle a').removeClass('active');
    $(this).closest('a').addClass('active');
    $('.result').html($(this).text()); // The new line
});

您需要做的是检索单击的“a”中的文本。这可以通过调用text()对象上的this元文件来完成。

Answer 2

$(this).text()会为您提供触发点击的标记内容。

$('.toggle a').click(function(){
    $('.toggle a').removeClass('active');
    $(this).closest('a').addClass('active');
    $('.result').html($(this).text());

});

Answer 3

$('.result').html( $(this).html() );

Answer 4

$(function(){

$('.toggle a').click(function(){
    var itemText=$(this).text();
    $('.toggle a').removeClass('active');
    $(this).closest('a').addClass('active');
    $('.result').html(itemText);

});        
})

工作样本http://jsfiddle.net/dvsrT/4/

jQuery显示当前的html元素值

4 个答案: