ボタンをドキュメントフローの次のdivに適用するにはどうすればよいですか？

Question

jQueryを使用して、一連のステップを順番に実行するボタンを表示させようとしています。私はまた、クリックしたときに各ステップを太字にし、他のステップをクリックしたときにアンボールドするようにします。したがって、どのステップがすでに太字であるかを知り、ボタンがクリックされたときに次のステップを太字にする必要があります。私はjQueryを初めて使っていて、これをどう語るべきかわからない！

これは私のhtmlです：

<div id="container"> 

    <div id="step1"> 
    1. Step 1. 
    </div> 

    <div id="step2"> 
    2. Step 2. 
    </div> 

    <div id="step3"> 
    3. Step 3. 
    </div> 

    <div id="step4"> 
    4. Step 4. 
    </div> 

    <div id="step5"> 
    5. Step 5. 
    </div> 

    <button> 
    NEXT STEP 
    </button> 

、これは私のCSSです：

#container { 
    height: 90%; 
    width: 60%; 
    border: 1px solid black; 
    border-radius: 3px; 
    margin: 5% 20%; 
    padding: 10px; 
    line-height: 1.5em; 
} 

button { 
    float: right; 
    position: relative; 
    margin-top: -8px; 
    background-color: black; 
    border: none; 
    border-radius: 3px; 
    color: white; 
    font-size: 1em; 
    padding: 8px; 
} 

div { 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 300; 
} 

.bold { 
    font-weight: 700; 
} 

そして、これは私が（ちょうど太字それらにステップをクリックするために）を開始しようとしましたjQueryのです：

$(function() { 

    $("#step1").click(function(){ 
    $("#step1").addClass("bold") 
    }) 

    $("#step2").click(function(){ 
    $("#step2").addClass("bold") 
    }) 

    $("#step3").click(function(){ 
    $("#step3").addClass("bold") 
    }) 

    $("#step4").click(function(){ 
    $("#step4").addClass("bold") 
    }) 

    $("#step5").click(function(){ 
    $("#step5").addClass("bold") 
    }) 

}) 

各ステップごとに別々の機能を持たせることもかなり繰り返されているようです。それらをすべて組み合わせる方法はありますか？私は試しましたが、すべてのステップを太字にして1つのステップをクリックしてください。

Answer 1

、私はこれはあなたの要件を満たす必要があると思う：

$('.step').click(function(){ 
 
     $('.bold') 
 
     .removeClass('bold'); 
 
     $(this) 
 
     .addClass('bold'); 
 
    }); 
 

 
    $('button').click(function(){ 
 
     if($('.bold').length < 1){ 
 
     $('.step') 
 
      .first() 
 
      .addClass('bold'); 
 
     } 
 
     else { 
 
     $('.bold') 
 
      .removeClass('bold') 
 
      .next('.step') 
 
       .addClass('bold'); 
 
     if($('.bold').length < 1){ 
 
      $('.step') 
 
      .first() 
 
       .addClass('bold'); 
 
     } 
 
     } 
 
    });

#container { 
 
    height: 90%; 
 
    width: 60%; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    margin: 5% 20%; 
 
    padding: 10px; 
 
    line-height: 1.5em; 
 
} 
 

 
button { 
 
    float: right; 
 
    position: relative; 
 
    margin-top: -8px; 
 
    background-color: black; 
 
    border: none; 
 
    border-radius: 3px; 
 
    color: white; 
 
    font-size: 1em; 
 
    padding: 8px; 
 
} 
 

 
div { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
} 
 

 
.bold { 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="step1" class="step">1</div> 
 
    <div id="step2" class="step">2</div> 
 
    <div id="step3" class="step">3</div> 
 
    <div id="step4" class="step">4</div> 
 
    <div id="step5" class="step">5</div> 
 
    <div id="step6" class="step">6</div> 
 
    <div id="step7" class="step">7</div> 
 
    <div id="step8" class="step">8</div> 
 
    <button>Next Step</button> 
 
</div>

JSBIN

更新：すべてのボタンを削除含めます：

 // To bold a step when it is clicked, 
 
    // first remove any existing bold class, 
 
    // then bold the step that was clicked 
 
    $('.step').click(function() { 
 
     $('.bold') 
 
     .removeClass('bold'); 
 
     $(this) 
 
     .addClass('bold'); 
 
    }); 
 

 
    // To bold the next step when next button is clicked: 
 
    // If there are no bold steps, bold the first one 
 
    $('.next').click(function() { 
 
     if ($('.bold').length < 1) { 
 
     $('.step') 
 
      .first() 
 
      .addClass('bold'); 
 
     } 
 
     // If there are bold steps, remove the current bold class, add bold class to the step after it 
 
     else { 
 
     $('.bold') 
 
      .removeClass('bold') 
 
      .next('.step') 
 
      .addClass('bold'); 
 

 
     // If there weren't any steps after the bold classes were removed, add bold class to the first step 
 
     if ($('.bold').length < 1) { 
 
      $('.step') 
 
      .first() 
 
      .addClass('bold'); 
 
     } 
 
     } 
 
    }); 
 

 
    // To remove .bold classes from all steps 
 
    $('.reset').click(function() { 
 
     $('.bold').removeClass('bold'); 
 
    });

#container { 
 
    height: 90%; 
 
    width: 60%; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    margin: 5% 20%; 
 
    padding: 10px; 
 
    line-height: 1.5em; 
 
} 
 
/* 
 
     .clear to fix the buttons problem. 
 
     Watch out when you use float: left 
 
     or float: right. 
 
    */ 
 

 
.clear:before, 
 
.clear:after { 
 
    content: ''; 
 
    display: table; 
 
} 
 
.clear:after { 
 
    clear: both 
 
} 
 
.next, 
 
.reset { 
 
    float: right; 
 
    position: relative; 
 
    margin-top: -8px; 
 
    background-color: black; 
 
    border: none; 
 
    border-radius: 3px; 
 
    color: white; 
 
    font-size: 1em; 
 
    padding: 8px; 
 
} 
 
.reset { 
 
    background: hsl(349, 86%, 50%); 
 
    margin-right: 10px; 
 
} 
 
div { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
} 
 
.bold { 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="step1" class="step">1</div> 
 
    <div id="step2" class="step">2</div> 
 
    <div id="step3" class="step">3</div> 
 
    <div id="step4" class="step">4</div> 
 
    <div id="step5" class="step">5</div> 
 
    <div id="step6" class="step">6</div> 
 
    <div id="step7" class="step">7</div> 
 
    <div id="step8" class="step">8</div> 
 
    <div class="clear"> 
 
    <button class="next">Next Step</button> 
 
    <button class="reset">Reset</button> 
 
    </div> 
 
</div>

Answer 2

これはあなたの後ですか？ jQueryを使用することの最大の利点の

$(function() { 
 
    $('#container [id]').click(function() { 
 
    $(this).addClass('bold'); 
 
    }); 
 
    $('#container button').click(function() { 
 
    $('#container [id]:not(.bold):first').addClass('bold'); 
 
    }); 
 
})

#container { 
 
    height: 90%; 
 
    width: 60%; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    margin: 5% 20%; 
 
    padding: 10px; 
 
    line-height: 1.5em; 
 
} 
 

 
button { 
 
    float: right; 
 
    position: relative; 
 
    margin-top: -8px; 
 
    background-color: black; 
 
    border: none; 
 
    border-radius: 3px; 
 
    color: white; 
 
    font-size: 1em; 
 
    padding: 8px; 
 
} 
 

 
div { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
} 
 

 
.bold { 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <div id="step1"> 
 
    1. Step 1. 
 
    </div> 
 

 
    <div id="step2"> 
 
    2. Step 2. 
 
    </div> 
 

 
    <div id="step3"> 
 
    3. Step 3. 
 
    </div> 
 

 
    <div id="step4"> 
 
    4. Step 4. 
 
    </div> 
 

 
    <div id="step5"> 
 
    5. Step 5. 
 
    </div> 
 

 
    <button> 
 
    NEXT STEP 
 
    </button> 
 
    
 
</div>

Answer 3

一つ抽象あります。あなたはそれほど具体的である必要はありません。 jQueryセレクタにアタッチされたイベントハンドラは、セレクタから返された各要素に適用されます。個人的に

$('.step').click(function() { 
 
$('.step').removeClass('bold') 
 
$(this).addClass('bold') 
 
})

#container { 
 
    height: 90%; 
 
    width: 60%; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    margin: 5% 20%; 
 
    padding: 10px; 
 
    line-height: 1.5em; 
 
} 
 

 
button { 
 
    float: right; 
 
    position: relative; 
 
    margin-top: -8px; 
 
    background-color: black; 
 
    border: none; 
 
    border-radius: 3px; 
 
    color: white; 
 
    font-size: 1em; 
 
    padding: 8px; 
 
} 
 

 
div { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
} 
 

 
.bold { 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <div class ="step" id="step1"> 
 
    1. Step 1. 
 
    </div> 
 

 
    <div class ="step" id="step2"> 
 
    2. Step 2. 
 
    </div> 
 

 
    <div class ="step" id="step3"> 
 
    3. Step 3. 
 
    </div> 
 

 
    <div class ="step" id="step4"> 
 
    4. Step 4. 
 
    </div> 
 

 
    <div class ="step" id="step5"> 
 
    5. Step 5. 
 
    </div> 
 

 
    <button> 
 
    NEXT STEP 
 
    </button>

Answer 4

私は、IDのを廃止し、クラスでそれを行うが、可能な限りあなたのコードに近いそれを維持するだろう - ボタンの横に数を追加し、適用するためにそれを使用divへのクラス（onclickのカウントを増やすことができます）。また、カウントを使用すると（他の回答に記載されている他のメソッドよりも）、最初のdivにカウントを戻すことができます。

$(document).ready(function(){ 
 
    $('#nextStep').click(function(){ 
 
    var current = $(this).val() 
 
    makeBold(current) 
 
    }) 
 
    
 
$('#container div').click(function(){ 
 
    var current = parseInt($(this).attr('id').substr(-1))-1; 
 
    makeBold(current); 
 
    }) 
 
}) 
 

 
function makeBold(current){ 
 
    var next = parseInt(current) +1; 
 
    var total = $('#container div').length; 
 
    if(current == total){next = 1}; 
 
    
 
    $('#nextStep').val(next); 
 
    $('div').removeClass('bold'); 
 
    $('#step'+next).addClass('bold'); 
 
    
 
    }

#container { 
 
    height: 90%; 
 
    width: 60%; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    margin: 5% 20%; 
 
    padding: 10px; 
 
    line-height: 1.5em; 
 
} 
 

 
button { 
 
    float: right; 
 
    position: relative; 
 
    margin-top: -8px; 
 
    background-color: black; 
 
    border: none; 
 
    border-radius: 3px; 
 
    color: white; 
 
    font-size: 1em; 
 
    padding: 8px; 
 
} 
 

 
div { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
} 
 

 
.bold { 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <div id="step1" class="bold"> 
 
    1. Step 1. 
 
    </div> 
 

 
    <div id="step2"> 
 
    2. Step 2. 
 
    </div> 
 

 
    <div id="step3"> 
 
    3. Step 3. 
 
    </div> 
 

 
    <div id="step4"> 
 
    4. Step 4. 
 
    </div> 
 

 
    <div id="step5"> 
 
    5. Step 5. 
 
    </div> 
 

 
    <button id="nextStep" value="1"> 
 
    NEXT STEP 
 
    </button>

Answer 5

このデモを試してみてください：ここで

$(function() { 
 

 
    $('div[id^="step"]').on('click', function(){ 
 
    \t $(this).addClass('bold'); 
 
    }); 
 
    
 
    $('button').on('click', function(){ 
 
    \t $('div[id^="step"]').not('.bold').first().addClass('bold'); 
 
    }); 
 

 
});

#container { 
 
    height: 90%; 
 
    width: 60%; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    margin: 5% 20%; 
 
    padding: 10px; 
 
    line-height: 1.5em; 
 
} 
 

 
button { 
 
    float: right; 
 
    position: relative; 
 
    margin-top: -8px; 
 
    background-color: black; 
 
    border: none; 
 
    border-radius: 3px; 
 
    color: white; 
 
    font-size: 1em; 
 
    padding: 8px; 
 
} 
 

 
div { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
} 
 

 
.bold { 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <div id="step1"> 
 
    1. Step 1. 
 
    </div> 
 

 
    <div id="step2"> 
 
    2. Step 2. 
 
    </div> 
 

 
    <div id="step3"> 
 
    3. Step 3. 
 
    </div> 
 

 
    <div id="step4"> 
 
    4. Step 4. 
 
    </div> 
 

 
    <div id="step5"> 
 
    5. Step 5. 
 
    </div> 
 

 
    <button> 
 
    NEXT STEP 
 
    </button>

Answer 6

は、作業コードは、

$(function() { 
 

 
    $('#buttonNextStep').click(function(){ 
 
    var step = parseInt($(this).data('step') || '0'); 
 
    $('#step' + (step).toString()).removeClass('bold'); 
 
    $('#step' + (++step).toString()).addClass('bold'); 
 
    $(this).data('step', step); 
 
    }); 
 

 
});

#container { 
 
    height: 90%; 
 
    width: 60%; 
 
    border: 1px solid black; 
 
    border-radius: 3px; 
 
    margin: 5% 20%; 
 
    padding: 10px; 
 
    line-height: 1.5em; 
 
} 
 

 
button { 
 
    float: right; 
 
    position: relative; 
 
    margin-top: -8px; 
 
    background-color: black; 
 
    border: none; 
 
    border-radius: 3px; 
 
    color: white; 
 
    font-size: 1em; 
 
    padding: 8px; 
 
} 
 

 
div { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
} 
 

 
.bold { 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <div id="step1"> 
 
    1. Step 1. 
 
    </div> 
 

 
    <div id="step2"> 
 
    2. Step 2. 
 
    </div> 
 

 
    <div id="step3"> 
 
    3. Step 3. 
 
    </div> 
 

 
    <div id="step4"> 
 
    4. Step 4. 
 
    </div> 
 

 
    <div id="step5"> 
 
    5. Step 5. 
 
    </div> 
 

 
    <button id="buttonNextStep"> 
 
    NEXT STEP 
 
    </button> 
 
    </div>

です各ステップの要素に stepのクラスを追加