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

how to use one method for all clickable items using jquery?

本文关键字：方法 一种 项目 jquery 何使用      更新时间：2023-09-26

将以下jquery脚本制作成一个单一方法的最佳方法是什么？该方法可以用我所有的可点击跨度来恢复？正如您所看到的，除了特定的CSS类和span唯一ID之外，每个点击事件都在做几乎完全相同的事情。我曾考虑过使用jquery.children（）方法，但我不确定如何将特定的类分配给每个span。如有任何帮助，我们将不胜感激。

 
<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>
相关文章：