javascript - 如何使用 jquery 对所有可点击项目使用一种方法？

Question

将以下 jquery 脚本制作成单个方法的最佳方法是什么，该方法可以用我所有的可点击跨度重新使用？正如您所看到的，除了特定的 CSS 类和跨度唯一 ID 之外，每个点击事件都在做几乎完全相同的事情。我考虑过使用 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>

Answer 1

这应该有效:

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