如何使按鈕對文檔流中的下一個div應用類？

我想要使用jQuery有一個按鈕，通過一系列的步驟，通過連續粗體化每個步驟來移動你。我還希望每一步在點擊時加粗，而在單擊任何其他步驟時放開。因此，它需要知道哪一步已經加粗，然後在點擊按鈕時加粗下一個。我是jQuery的新手，不知道怎麼說這個！如何使按鈕對文檔流中的下一個div應用類？

這是我的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") 
    }) 

})

它也似乎很重複每個步驟有一個單獨的功能。有沒有辦法把它們全部結合起來？我嘗試過，但後來點擊一步粗體顯示所有步驟。

來源

2016-11-05 Cleo

添加類的step每一步元素，我想這應該滿足你的要求：

$('.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>

來源

2016-11-05 01:08:15 amdouglas

謝謝，這就明白了！現在我想知道是否可以有另一個按鈕從任何步驟中刪除粗體？我試圖弄亂代碼，但我仍然不明白這是如何工作的。你能解釋一下怎麼做嗎？ – Cleo

[你在這裏]（https://output.jsbin.com/yajufabufe）。 – amdouglas

謝謝，非常樂於助人！ – Cleo

這是你的事後？

$(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>

來源

2016-11-05 00:46:25 Keith

一個使用jQuery的最大優點是抽象。你不需要這麼具體。附加到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>

來源

2016-11-05 00:46:37 Damon

個人而言，我會用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>

來源

2016-11-05 00:49:38 gavgrif

謝謝！有沒有一種方法可以添加Damon在下面添加的代碼中，以便您可以單擊這些步驟來突出顯示它們？然後讓nextStep函數從那裏拿走它？我試着添加它，但我認爲你的代碼有點衝突。 – Cleo

是 - 給我一分鐘 - 將修改答案 – gavgrif

無後顧之憂 - 但爲了完整起見 - 看看我做了什麼 - 基本點擊單個div或下一個按鈕將當前數字傳遞給一個已命名的函數， .bold類。 – gavgrif

試試這個演示：

$(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>

來源

2016-11-05 00:50:01 four

這裏是工作的代碼，

$(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>

來源

2016-11-05 00:51:15 Aruna

如何使按鈕對文檔流中的下一個div應用類？

回答

相關問題