.click 事件未触发

Question

对 jQuery 和 Javascript 很陌生，但我似乎无法让它工作......好吧，反正不用重复自己。

当用户在每个步骤中单击按钮时，我希望根据序列中的步骤编号显示和隐藏页面上的多个 div id。

<div class="step" id="step1">
  <h3>1. Select size series</h3>
  <img id="size4" src="http://placehold.it/200x200&text=Size 4" />
  <img id="size6" src="http://placehold.it/200x200&text=Size 6" />
  <img id="size9" src="http://placehold.it/200x200&text=Size 9" />
  <p class="button">Next Step</p>
</div>

<div class="step" id="step2">
  <h3>2. Select Receptacle</h3>
  <img id="rivetOn" src="http://placehold.it/200x200&text=Rivet On" />
  <img id="weldOn" src="http://placehold.it/200x200&text=Weld On" />
  <img id="sideMount" src="http://placehold.it/200x200&text=Side Mount" />
  <img id="clipOn" src="http://placehold.it/200x200&text=Clip On" />
  <img id="miniClipOn" src="http://placehold.it/200x200&text=Mini Clip On" />
  <img id="frontMount" src="http://placehold.it/200x200&text=Front Mount" />
  <img id="pressIn" src="http://placehold.it/200x200&text=Press In" />
  <img id="clinch" src="http://placehold.it/200x200&text=Self Clinch" />
  <p class="button">Next Step</p>
</div>

当用户点击#step1 中的一张图片时，会出现#step1 .button。

当#step1 .button 被点击时，变量被设置并且#step2 显示。到目前为止，这是我的脚本，我正在尝试重复自己。

$(document).ready(function() {
// Define global Variables.

var series;
var receptacle;
var tmtAdjust = 0;
var retainer;
var length;
var headStyle;
var finish;

var step = 1;

var stepStr = "step";
var stepId = stepStr.concat(step);
var stepButton = stepId.concat(" .button");

// Add border to clicked images 

$( '.step img' ).click(function() {

    $( '.step img' ).removeClass ( "selected" );
    $(this).addClass( "selected" );

}); // End of global .step img event

$( '#step1 img').click(function() {

    $( '#step1 .button').slideDown( "slow", function() {
        $(this).focus();
    });

    switch(this.id) {           
        case "size4":
        series = 4;         
        break;
        case "size6":
        series = 6;         
        break;
        case "size9":
        series = 9;         
        break;
    }

    $("#stud-series").text(series);

}); // End of Series step img click event

$( '#step2 img').click(function() {

    $( '#step2 .button').slideDown( "slow", function() {
        $(this).focus();
    });

    switch(this.id) {

        case "rivetOn":
        receptacle = "A";
        $("#receptacle-part-number").text("D8-33" + series + "-400-121");                       
        break;

        case "weldOn":
        receptacle = "A";
        $("#receptacle-part-number").text("D8-33" + series + "-500-121");
        break;

        case "sideMount":
        receptacle = "B";
        $("#receptacle-part-number").text("D8-33" + series + "-310-121");
        break;

        case "clipOn":
        receptacle = "B";
        $("#receptacle-part-number").text("D8-33" + series + "-300-121");
        break;

        case "miniClipOn":
        receptacle = "B";
        $("#receptacle-part-number").text("D8-33" + series + "-330-121");
        break;

        case "miniClipOnStainless":
        receptacle = "B";
        $("#receptacle-part-number").text("D8-33" + series + "-330-300");
        break;

        case "frontMount":
        receptacle = "C";
        $("#receptacle-part-number").text("D8-33" + series + "-200-190");
        break;

        case "pressIn":
        receptacle = "D";
        $("#receptacle-part-number").text("D8-33" + series + "-100-300");
        break;

        case "selfClinch":
        receptacle = "D";
        $("#receptacle-part-number").text("D8-33" + series + "-110-190");
        break;
    }

}); // End of Receptacle step img click event

// Show/hide next step on selction.

$("#" + stepButton).click(function() {

    alert("Button Clicked");
    $("#" + stepId).slideUp( "slow");
    switch(step) {

        case 1:

            switch(series) {
                case 4:
                $("#miniClipOn").hide();
                $("#miniClipOnStainless").hide();
                $("#cupWasher").hide();
                $("#ejectorSpring").hide();
                $("#tamperResist").hide();
                $("#stainless").hide();
                break;

                case 9:
                $("#miniClipOn").hide();
                $("#miniClipOnStainless").hide();
                $("#cupWasher").hide();
                $("#ejectorSpring").hide();
                $("#retainingSpringShort").hide();
                $("#tamperResist").hide();
                $("#stainless").hide();
                break;
            }

        default: 
        break;  

    }

    step++;
    stepId = stepStr.concat(step);
    stepButton = stepId.concat(" .button");


    $("#" + stepId).slideDown( "slow" );    


}); // End of "Next Step" button click event.

}); // End of Document.Ready

问题是这适用于 #step1... 但不适用于第 2 步。

链接 http://craigstruthers.com/quarter-turn-selector/d8.html

相关的 CSS

    .step img{
    border:1px solid #ffffff;
}

    .step img.selected, .step img:hover {
    border:1px solid #DA2328;
    }

.step .button {
    display:none;
}

#step2, #step3, #step4, #step5, #step6, #step7 {
    display:none;
}

Answer 1

如果您想绑定多个步骤，只需使用类而不是 id：

$('.step img').on('click', function() {
   var $step = $(this).closest('.step');
   alert($step.attr('id')  + ' was clicked');  
});

或者您也可以在文档就绪处理程序期间迭代您的步骤：

$.each([1,2,3,4,5,6,7], function(i, stepId) {
  $('#step' + stepId).on('click', function() {
    alert(stepId + ' was clicked');
  });
});