Question

What would be the best way to make the following jquery script into a single method which can be resued with all of my clickable spans? As you can see each click event is doing almost the exact same thing except for the specific CSS class and the spans unique ID. I have thought about using the jquery .children() method but I’m not sure how to assign the specific class to each span. Any help would be appreciated.

 

<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

This should work:

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