如何仅为所选元素“做某事”

时间:2014-11-12 05:50:03

标签: jquery class css-selectors

因此,我尝试根据您选择的选项提供不同的分数来选择不同的分数,这些分数将加起来为全局变量提供总和。我已经尝试了我能想到的一切(这不是那么多)而且没有运气。一些注释掉的部分是我失败的尝试。谢谢你的帮助。

$(document).ready(function() {

var score = 0;

//function selecting() {
    $('.choices p').on('click', function() {
        $(this).closest('.choices').find('p').removeClass('selected');
        $(this).addClass('selected');
        if ($(this).is('.a, .selected')) {
            score += 1;
        }

        else if ($(this).is('.b, .selected')) {
            score += 2;
        }

        else if ($(this).is('.c, .selected')) {
            score += 3;
        }

        else if ($(this).is('.d, .selected')) {
            score += 4;
        }
        /*function tally() {
            if ($(this).hasClass('a') && $(this).hasClass('selected')) {
                score += 1;
            }

            else if ($(this).hasClass('b') && $(this).hasClass('selected')) {
                score += 2;
            }

            else if ($(this).hasClass('c') && $(this).hasClass('selected')) {
                score += 3;
            }

            else if ($(this).hasClass('d') && $(this).hasClass('selected')) {
                score += 4;
            }
        };
        tally();*/

    });

    $("input[type='submit']").click(function() {
        /*var choice = $(this).prev('.choices').find('p');
        if (choice.hasClass('a') && choice.hasClass('selected')) {
            score += 2;
        }
        /*if (choice.hasClass('b') && choice.hasClass('selected')) {
            score += 2;
        }*/
        $(this).prev('.choices').find('p').off('click');
        $('.score').text('Score is ' + score);

    });
//};

//selecting();

这里是html:

<body>
<div class='section' id='s1'>
    <div class='center' id='center1'>
        <div class='question' id='q1'>
        </div>
        <div class='choices' id='choices1'>
            <p class='a'>Choice A</p>
            <p class='b'>Choice B</p>
            <p class='c'>Choice C</p>
            <p class='d'>Choice D</p>
        </div>
        <!--<div class='move'>Submit</div>-->
        <input type='submit' value='Submit' class='submit'>
        <p class='score'></p>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

    <div class='choices' id='choices1'>
        <p data='1'>Choice A</p>
        <p data='2'>Choice B</p>
        <p data='3'>Choice C</p>
        <p data='4'>Choice D</p>
   </div>

   $('.choices p').on('click', function() {
          vat t=$(this);
          t.removeClass('selected').addClass('selected').siblings().removeClass('selected');
          score += t.attr('data');
    });