如何仅对选定的元素“做某事”答案

【问题标题】：How to 'do something' only for the element that is selected如何仅对选定的元素“做某事”
【发布时间】：2015-01-08 21:40:09
【问题描述】：

所以我正在尝试做出多项选择题，根据您选择的选项给出不同的分数，这将加起来为全局变量提供总和。我已经尝试了所有我能想到的（不是那么多）但没有运气。一些被注释掉的部分是我失败的尝试。感谢您的帮助。

$(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>

【问题讨论】：

标签： jquery class css-selectors

【解决方案1】：

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

【讨论】：