Question

为了简化问题，这里是我的HTML代码：

<div class="step1 main-step">
    <div class="step1a tooltip" step-name="step1a" title="Step 1a" style="width: 25.000%;"></div>
    <div class="step1b tooltip" step-name="step1b" title="Step 1b" style="width: 25.000%;"></div>
    <div class="step1c tooltip" step-name="step1c" title="Step 1c" style="width: 25.000%;"></div>               
    <div class="step1d tooltip" step-name="step1d" title="Step 1d" style="width: 25.000%;"></div>
</div> <!-- End of Step 1 -->

<div class="step2 main-step">
    <div class="step2a tooltip" step-name="step2a" title="Step 2a" style="width: 25.000%;"></div>            
    <div class="step2b tooltip" step-name="step2b" title="Step 2b" style="width: 25.000%;"></div>
    <div class="step2c tooltip" step-name="step2c" title="Step 2c" style="width: 25.000%;"></div>
    <div class="step2d tooltip" step-name="step2d" title="Step 2d" style="width: 25.000%;"></div>
</div> <!-- End of Step 2 -->

<a href="#" current-step="step1a" next-step="step1b" class="button" id="continue-button">Continue</a>

现在，我的问题是当我使用这个jQuery代码时：

$nextStep = $('#continue-button').attr('next-step');    
$('#continue-button').attr('current-step', $nextStep);
$nextTemp = $('div.' + $nextStep).next('.tooltip').attr('step-name');
$('#continue-button').attr('next-step', $nextTemp);

$ nextTemp 在 step1d 处停止。我该怎么办$ nextTemp会从其他div读取下一个div.tooltip（step2，step3，step4等）？

Answer 1

我解决了骑自行车的问题，而不是试图直接拿到它

$( "#continue-button" ).click( function() {
    $nextStep = $('#continue-button').attr('next-step');    
    $('#continue-button').attr('current-step', $nextStep);

    var foundDiv = false;
    $( ".tooltip" ).each( function() {
        if( foundDiv ) {
            $nextTemp = $( this ).attr( "step-name" );
            foundDiv = false;
        } else {
            if( $( this ).attr( "step-name" ) == $nextStep ) {
                foundDiv = true;
            }
        }
    });
    $('#continue-button').attr('next-step', $nextTemp);
});

Answer 2

外部 Fiddle DEMO

我已对您的html进行了一些更改，以使用有效的html data-* attributes，如下所示，并检查内联评论：

$(".button").on('click',function(){
    var currentStep=$(this).data('current-step'); //get the current-step
    var $nextStep=$('.'+currentStep).next('.tooltip').length?$('.'+currentStep).next('.tooltip').data('step-name'):$('.'+currentStep).closest('.main-step').next('.main-step').find('div:first').data('step-name');
    //ternary operator if there is nextstep in current main-step then take it otherwise
    //go to its parent and get next main-step first div's step-name data attribute
    if(typeof $nextStep !=  'undefined') //check if it is undefined
    {
    	$(this).data('current-step', $nextStep);
	$nextTemp = $('div.' + $nextStep).next().length?$('div.' + $nextStep).next().data('step-name'):$('.'+$nextStep).closest('.main-step').next().find('div:first').data('step-name');
	typeof $nextTemp!='undefined'?$(this).data('next-step', $nextTemp):$(this).data('next-step', 'No more steps');
        //ternary operators again
    }
    $('.result').append("Current Step : " +$(this).data('current-step')+ " " + "Next Step :" +$(this).data('next-step') +"<br/>");
    //just to show what the results will be after each click.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step1 main-step">
    <div class="step1a tooltip" data-step-name="step1a" title="Step 1a" style="width: 25.000%;"></div>
    <div class="step1b tooltip" data-step-name="step1b" title="Step 1b" style="width: 25.000%;"></div>
    <div class="step1c tooltip" data-step-name="step1c" title="Step 1c" style="width: 25.000%;"></div>               
    <div class="step1d tooltip" data-step-name="step1d" title="Step 1d" style="width: 25.000%;"></div>
</div> <!-- End of Step 1 -->

<div class="step2 main-step">
    <div class="step2a tooltip" data-step-name="step2a" title="Step 2a" style="width: 25.000%;"></div>            
    <div class="step2b tooltip" data-step-name="step2b" title="Step 2b" style="width: 25.000%;"></div>
    <div class="step2c tooltip" data-step-name="step2c" title="Step 2c" style="width: 25.000%;"></div>
    <div class="step2d tooltip" data-step-name="step2d" title="Step 2d" style="width: 25.000%;"></div>
</div> <!-- End of Step 2 -->

<a href="#" data-current-step="step1a" data-next-step="step1b" class="button" id="continue-button">Continue</a>

<div class='result'></div>

jQuery下一个DIV与特定类，驻留在另一个DIV中

2 个答案: