text(）不是't在jQuery中工作

text() isn't working in jQuery

本文关键字：jQuery 工作 不是 text      更新时间：2023-09-26
jQuery的text()函数在第二次点击时不起作用，如jsFiddle 中所示

这是HTML代码：

<div class="mb20"></div>
<nav id="lastNavigation" class="d row clearfix">
    <aside class="col-xs-11">
        <div class="col-xs-12 lessonNavigation lesson">
            <ul class="expandable">
                <li class="">
                    <a href="#">
                        <span>L1<b>: Recognize a digit represents 10 times the value</b></span>
                    </a>
                </li>
                <li class="">
                    <a href="#">
                        <span>L2<b>: Recognize a digit represents 10 times the value</b></span>
                    </a>
                </li>
                <li class="">
                    <a href="#">
                        <span>L3<b>: Recognize a digit represents 10 times the value</b></span>
                    </a>
                </li>
                <li class="">
                    <a href="#"> 
                        <span>L4<b>: Recognize a digit represents 10 times the value</b></span>
                    </a>
                </li>
                <li class="">
                    <a href="#">
                        <span>L5<b>: Recognize a digit represents 10 times the value</b></span>
                    </a>
                </li>
            </ul>
        </div>
    </aside>
</nav>

这是JavaScript：

var count = $('.lessonNavigation li').length;
//========================= Module and Unit Navigation ==================================
if (count > 10 && count <= 18) {
    $('.lessonNavigation li').attr('class', 'contracted');
    $('.lessonNavigation li:eq(0)').attr('class', 'expanded left');
    $('.lessonNavigation li:eq(1)').attr('class', 'activeLesson');
    $('.lessonNavigation li:eq(2)').attr('class', 'expanded right');
}
//========================= Expand all navigation by clicking 'contracted' ==============
$('.tilesToggle').click(function () {
    $(this).text('Close').toggleClass('tilesToggle tilesToggleClose');
    $('.expandable').attr('class', 'expanded');
    $('ul.expanded li.activeLesson').attr('class', 'selected');
    $('ul.expanded li:not(.selected)').attr('class', '');
    $('.lessonNavigation li:even').addClass('animated bounceInLeft');
    $('.lessonNavigation li:odd').addClass('animated bounceInRight');
    $('.icon-arrow-left, .icon-arrow-right').css('display', 'none');
});
$('.tilesToggleClose').click(function () {
    $(this).text('See All').toggleClass('tilesToggleClose tilesToggle');
    $('ul.expanded li.selected').attr('class', 'activeLesson');
});

问题不在于.text()，而是根本没有调用您的第二次单击处理程序。当你说：

$('.tilesToggleClose').click(function () {

您将click处理程序绑定到当时具有该类的任何元素，而不是绑定到单击发生时将来可能具有该类的元素。因此，它是在元素上的所有单击时调用的第一个单击处理程序。

您可以使用绑定到父元素的委托事件处理程序：

$('div.lesson').on('click','.tilesToggle', function () {
   ...
});
$('div.lesson').on('click','.tilesToggleClose', function () {
   ...
});

演示：http://jsfiddle.net/hL396/2/

但是，当调用.click()时，只需将单击处理程序绑定到将具有.tilesToggle类的元素，然后在处理程序中测试类可能会更容易：

$('.tilesToggle').click(function () {
    var $this = $(this);
    if ($this.hasClass('tilesToggleClose')) {
        $this.text('See All');
        $('ul.expanded li.selected').attr('class', 'activeLesson');
    } else {
        $this.text('Close');
        $('.expandable').attr('class', 'expanded');
        $('ul.expanded li.activeLesson').attr('class', 'selected');
        $('ul.expanded li:not(.selected)').attr('class', '');
        $('.lessonNavigation li:even').addClass('animated bounceInLeft');
        $('.lessonNavigation li:odd').addClass('animated bounceInRight');
        $('.icon-arrow-left, .icon-arrow-right').css('display', 'none');
    }
    $this.toggleClass('tilesToggle tilesToggleClose');
});

演示：http://jsfiddle.net/hL396/3/

它没有调用，因为点击处理程序在拥有类之前已经初始化。修复：

function showTiles() {
    $(this).text('Close').addClass('isShowingTiles');
    $('.expandable').attr('class', 'expanded');
    $('ul.expanded li.activeLesson').attr('class', 'selected');
    $('ul.expanded li:not(.selected)').attr('class', '');
    $('.lessonNavigation li:even').addClass('animated bounceInLeft');
    $('.lessonNavigation li:odd').addClass('animated bounceInRight');
    $('.icon-arrow-left, .icon-arrow-right').css('display', 'none');
}
function hideTiles() {
    $(this).text('See All').removeClass('isShowingTiles');
    $('ul.expanded li.selected').attr('class', 'activeLesson');
}

$('.tilesToggle').click(function() {
    if (!$(this).hasClass("isShowingTiles")){
        showTiles.apply($(this));
    }
    else{
        hideTiles.apply($(this));
    }
});

我猜您想在第二次单击时展开li，并将文本设置为SeeAll

我使用了一个简单的if-else标志

var flag = false;
$('.tilesToggle').click(function () {
    if (!flag){
        $(this).text('Close');
    $('.expandable').attr('class', 'expanded');
    $('ul.expanded li.activeLesson').attr('class', 'selected');
    $('ul.expanded li:not(.selected)').attr('class', '');
    $('.lessonNavigation li:even').addClass('animated bounceInLeft');
    $('.lessonNavigation li:odd').addClass('animated bounceInRight');
    $('.icon-arrow-left, .icon-arrow-right').css('display', 'none');
        flag = true;
    }else{
        $(this).text('See All');
        $('ul.expanded li.selected').attr('class', 'activeLesson');
        flag = false;
    }
});

演示：jsfiddle

相关文章：