Question

text() jQuery的功能在第二次点击时不起作用，如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');
});

Answer 1

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

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

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

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

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

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

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

$('.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/

Answer 2

它没有调用，因为click处理程序在具有类之前已初始化。修正：

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));
    }
});

Answer 3

我猜你想在第二次点击时展开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

text（）不是在jQuery中工作

3 个答案: