选择页面上具有特定类别的最后一个元素

科斯塔斯·库图皮斯(Kostas Koutoupis)

我正在进行测验。我想选择页面上具有特定类的最后一个元素,以便当用户单击它时出现测验的结果。现在,我正在通过添加一个额外的类来做到这一点,但我想知道是否有一种无需使用类就可以遍历文档的方法,以便无论有多少个问题添加到测验中,该函数都会在最后一个触发时触发。单击元素。我尝试了这里这里建议的解决方案但似乎没有用。谢谢

我创建了以下codepen

    //get total of questions
var $questionNumber = $('h2').length;
console.log($questionNumber);
//caching final score
var $totalScore=0;

$('li').click(function(){
    //caching variables
    var $parent = $(this).parent();
    var $span = $(this).find('.fa');

    //deactivate options on click
     $parent.find('li').off("click");

    //check for .correct class
        //if yes
        if($(this).hasClass('correct')){
            //add .correctAnswer class
            $(this).addClass('correctAnswer');
            //find next span and change icon
            $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
            //reduce opacity of siblings
            $(this).siblings().addClass('fade');
            //show answer
            var $answerReveal= $parent.next('.answerReveal').show();
            var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
            var $toShowFalse = $answerReveal.find('.quizzAnswerF');
            $toShowCorrect.show();
            $toShowFalse.remove();
            //add 1 to total score
            $totalScore+=1;
            //console.log($totalScore);
        }else{
            //add .wrongAnswer class
            $(this).addClass('wrongAnswer').addClass('fade');
            //change icon
            $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
            //reduce opacity of its siblings
            $(this).siblings().addClass('fade');
            //show wrong Message
            var $answerReveal= $parent.next('.answerReveal').show();
            var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
            var $toShowFalse = $answerReveal.find('.quizzAnswerF');
            $toShowCorrect.remove();
            $toShowFalse.show();
            //locate correct and highlight
            $parent.find('.correct').addClass('correctAnswer');
        };
});//end click function

//print Results
function printResult(){
    var resultText = '<p>';
    if ($totalScore === $questionNumber){
        resultText+='You got '+ $totalScore+ ' out of '+$questionNumber+'! </p>';
        $('.resultContainer').append(resultText);
        $('#halfText').append('<p>This is awesome!</p>');
        $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
    }else if($totalScore>=3 && $totalScore < $questionNumber){
        resultText+='You got '+ $totalScore+ ' out of '+$questionNumber+'! </p>';
        $('.resultContainer').append(resultText);
        $('#halfText').append('<p>So and so...better luck next time</p>');
        $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
    }else if ($totalScore<3){
        resultText+='You got '+ $totalScore+ ' out of '+$questionNumber+' </p>';
        $('.resultContainer').append(resultText);
        $('#halfText').append('<p>No..no...no...you have to try harder</p>');
        $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
    }

};//end function

//final score
$('li.last').click(function(){
    //show result after last li is clicked
    var $height = $('.finalResult').height();
        printResult();
        console.log($totalScore)
        $('.finalResult').show();
        $('html, body').animate({ 
       scrollTop: $(document).height()-$height}, 
       1400);   
});
空灵的

使用给定类获取最后一个元素非常简单:

$('selector').last().click(...);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何选择具有特定类别的第一个元素

来自分类Dev

最终帖子未显示在wordpress网站上的最后一个类别页面上

来自分类Dev

如何选择具有几个不同类别的元素?

来自分类Dev

选择页面上具有特定类别的最后一个元素

来自分类Dev

如何在具有特定类的最后一个列表元素之后附加html?

来自分类Dev

如果另一个元素具有特定值,请选择所有节点

来自分类Dev

Wordpress:如何创建包含具有1个特定类别的帖子的外部页面或文件?

来自分类Dev

jQuery:如何仅选择一个具有相同类别的收音机?

来自分类Dev

如何选择没有特定类别的最后一个元素?

来自分类Dev

在具有DOM的列表中选择项目的最后一个元素

来自分类Dev

选择元素后具有特定类别的第一个兄弟姐妹

来自分类Dev

试图选择具有特定类别的复选框

来自分类Dev

具有特定类别的第一个祖先的XPath

来自分类Dev

CakePHP:如何使用“ nice” URL选择一个类别的所有元素?(/ category / NAME_OF_CATEGORY)

来自分类Dev

选择具有特定类别的最后一个元素

来自分类Dev

jQuery滑块:只有最后一个滑块在具有多个滑块的页面上工作

来自分类Dev

最终帖子未显示在wordpress网站上的最后一个类别页面上

来自分类Dev

选择相同类别的第一个元素

来自分类Dev

选择具有特定元素的最后一个孩子

来自分类Dev

是否有一个wordpress功能允许页面显示某个特定类别的所有帖子?

来自分类Dev

检查是否选择了两个以上具有特定类别的选项

来自分类Dev

BeautifulSoup 4:选择带有至少一个带有特定类别的子p标签的所有div

来自分类Dev

选择除具有特定类的最后一个元素以外的所有元素

来自分类Dev

将CSS规则应用于具有特定类别但最后一个类别的所有元素

来自分类Dev

XPATH 具有特定元素的最后一个元素

来自分类Dev

选择除最后一个以外的所有元素

来自分类Dev

在 CSS 中选择具有特定类的序列的第一个和最后一个元素

来自分类Dev

如果页面上有特定元素,请通过 Javascript 用户脚本单击另一个元素?

来自分类Dev

选择一个元素作为具有属性的最后一个子元素

Related 相关文章

  1. 1

    如何选择具有特定类别的第一个元素

  2. 2

    最终帖子未显示在wordpress网站上的最后一个类别页面上

  3. 3

    如何选择具有几个不同类别的元素?

  4. 4

    选择页面上具有特定类别的最后一个元素

  5. 5

    如何在具有特定类的最后一个列表元素之后附加html?

  6. 6

    如果另一个元素具有特定值,请选择所有节点

  7. 7

    Wordpress:如何创建包含具有1个特定类别的帖子的外部页面或文件?

  8. 8

    jQuery:如何仅选择一个具有相同类别的收音机?

  9. 9

    如何选择没有特定类别的最后一个元素?

  10. 10

    在具有DOM的列表中选择项目的最后一个元素

  11. 11

    选择元素后具有特定类别的第一个兄弟姐妹

  12. 12

    试图选择具有特定类别的复选框

  13. 13

    具有特定类别的第一个祖先的XPath

  14. 14

    CakePHP:如何使用“ nice” URL选择一个类别的所有元素?(/ category / NAME_OF_CATEGORY)

  15. 15

    选择具有特定类别的最后一个元素

  16. 16

    jQuery滑块:只有最后一个滑块在具有多个滑块的页面上工作

  17. 17

    最终帖子未显示在wordpress网站上的最后一个类别页面上

  18. 18

    选择相同类别的第一个元素

  19. 19

    选择具有特定元素的最后一个孩子

  20. 20

    是否有一个wordpress功能允许页面显示某个特定类别的所有帖子?

  21. 21

    检查是否选择了两个以上具有特定类别的选项

  22. 22

    BeautifulSoup 4:选择带有至少一个带有特定类别的子p标签的所有div

  23. 23

    选择除具有特定类的最后一个元素以外的所有元素

  24. 24

    将CSS规则应用于具有特定类别但最后一个类别的所有元素

  25. 25

    XPATH 具有特定元素的最后一个元素

  26. 26

    选择除最后一个以外的所有元素

  27. 27

    在 CSS 中选择具有特定类的序列的第一个和最后一个元素

  28. 28

    如果页面上有特定元素,请通过 Javascript 用户脚本单击另一个元素?

  29. 29

    选择一个元素作为具有属性的最后一个子元素

热门标签

归档