如何使用jQuery对所有可点击项使用一种方法？

问题描述

| 将以下jquery脚本转换为可与我的所有可点击范围一起使用的单个方法的最佳方法是什么？如您所见，除了特定的CSS类和跨度唯一ID外，每个click事件几乎都在做同样的事情。我已经考虑过使用jquery .children（）方法，但是我不确定如何将特定的类分配给每个范围。任何帮助，将不胜感激。         

<p class=\"clickHolder\">
    <span id=\"click1\">Select Step 1</span> 
    <span id=\"click2\">Select Step 2</span> 
    <span id=\"click3\">Select Step 3</span> 
    <span id=\"click4\">Select Step 4</span> 
    <span id=\"click5\">Select Step 5</span>
</p>
<script type=\"text/javascript\">
    $(document).ready(function () {
        $(\"#click1\").click(function () {
            $(\"#wizardSteps\").removeClass();
            $(\"#wizardSteps\").addClass(\"step1\");
        });

        $(\"#click2\").click(function () {
            $(\"#wizardSteps\").removeClass();
            $(\"#wizardSteps\").addClass(\"step2\");
        });

        $(\"#click3\").click(function () {
            $(\"#wizardSteps\").removeClass();
            $(\"#wizardSteps\").addClass(\"step3\");
        });

        $(\"#click4\").click(function () {
            $(\"#wizardSteps\").removeClass();
            $(\"#wizardSteps\").addClass(\"step4\");
        });

        $(\"#click5\").click(function () {
            $(\"#wizardSteps\").removeClass();
            $(\"#wizardSteps\").addClass(\"step5\");
        });

    });
</script>

    

解决方法

这应该工作：

$(\'[id^=\"click\"]\').click(function () {
    var stepnum = $(this).attr(\'id\').substr(5);
    $(\"#wizardSteps\").removeClass();
    $(\"#wizardSteps\").addClass(\"step\" + stepnum);
});

    ,像这样：

<p class=\"clickHolder\">
    <span class=\"clickable\" id=\"click1\">Select Step 1</span> 
    <span class=\"clickable\" id=\"click2\">Select Step 2</span> 
    <span class=\"clickable\" id=\"click3\">Select Step 3</span> 
    <span class=\"clickable\" id=\"click4\">Select Step 4</span> 
    <span class=\"clickable\" id=\"click5\">Select Step 5</span>
</p>

<script type=\"text/javascript\">
    $(document).ready(function () {
        $(\".clickable\").click(function () {
            $(\"#wizardSteps\").removeClass();
            $(\"#wizardSteps\").addClass( /* calculate step */);
        });
    });
</script>