更改每个数组元素的背景颜色

Question

Having this code, been trying to implement a function but got stuck. The purpose would be that each time you press "Next" and a new flashcard is displayed, it should have a new background colour. As you see, the elements of the flashcards are displayed through an array. I tried to add a new array and increment at the same time with the next-card, but got stuck :/ .

Answer 1

Try this

const colors = ["#000","#667eea","#764ba2"];
function getColor() { 
  return colors[Math.floor(Math.random()*colors.length)]
}

I added this in clicknext and clickprevious

  accordion_toggle.css({"background": 
  "linear-gradient(135deg, "+getColor()+ " 0%, " + getColor()+" 100%)"});        

 var idioms = [ "Das Fruhstuck <br><br> 🍓 ", "Strawberry", "Das Auto <br><br>🚗 ", "Car", "Der Stuhl<br><br> 🪑", "Chair", "Die Jacke<br><br> 🧥 ", "The Jacket", "Der asd<br><br>👩‍💼", "asd", "test<br><br> 🐝 ", "test1" ] ; var index = 0; var increment = 2; var $accordion_toggle = $('#accordion-toggle'); var $accordion_content = $('#accordion-content'); function incrementIndex () { index += increment; if (index >= idioms.length) { index = 0; } } function decrementIndex () { index -= increment; if (index < 0) { index = (idioms.length - increment); } } const colors = ["#000","#667eea","#764ba2"]; function getColor() { return colors[Math.floor(Math.random()*colors.length)] } function updateIdioms () { $accordion_toggle.html(idioms[index]); $accordion_content.html(idioms[index + 1]); } function onNextClick () { $accordion_toggle.css({"background": "linear-gradient(135deg, "+getColor()+" 0%, "+getColor()+" 100%)"}); $accordion_content.slideUp(function () { incrementIndex(); updateIdioms(); }); } function onPreviousClick () { $accordion_toggle.css({"background": "linear-gradient(135deg, "+getColor()+" 0%, "+getColor()+" 100%)"}); $accordion_content.slideUp(function () { decrementIndex(); updateIdioms(); }); } $(function () { updateIdioms(); $('#Next').click(onNextClick); $('#Previous').click(onPreviousClick); $accordion_toggle.click(function () { $accordion_content.slideToggle('fast'); }); });

 #accordion-toggle { cursor: pointer; margin: auto; margin-top:20px; font-size: 25px; margin-top: 50px; font-family: 'Ubuntu', sans-serif; background: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); height: 100px; width: 200px; text-align: middle; padding: 30px; border-radius: 30px; color: black; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4), 0 0 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; /* ---------------------------------------------- * Generated by Animista on 2020-11-13 13:16:23 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation flip-horizontal-bottom * ---------------------------------------- */ @-webkit-keyframes flip-horizontal-bottom { 0% { -webkit-transform: rotateX(0); transform: rotateX(0); } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @keyframes flip-horizontal-bottom { 0% { -webkit-transform: rotateX(0); transform: rotateX(0); } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } } } #accordion-toggle:hover { cursor: pointer; margin: auto; font-size: 2; font-family: 'Ubuntu', sans-serif; margin-top: 50px; background: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); height: 100px; width: 200px; text-align: middle; padding: 30px; border-radius: 30px; color: black; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4), 0 0 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.25), 0 0 4px 2px rgba(0, 0, 0, 0.05); transform: translateY(-2px); } @import url ("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap"); #accordion-content { font-family: 'Ubuntu', sans-serif; display: none; font-size: 22px; cursor: pointer; margin: auto; font-size: 2; margin-top: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 60px; width: 150px; text-align: middle; padding: 30px; border-radius: 30px; color: black; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4), 0 0 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; } #accordion-content.default { font-family: 'Ubuntu', sans-serif; display: block; } #accordion { font-family: 'Ubuntu', sans-serif; text-align: center; } button { background-color: darkgreen; /* Green */ border-radius: 50px; border: none; color: white; padding: 13px 50px; text-align: center; text-decoration: none; display: inline; font-size: 16px; margin-top: 50px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4), 0 0 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; } button:hover { background-color: green; /* Green */ border-radius: 50px; border: none; color: white; padding: 13px 50px; text-align: center; text-decoration: none; display: inline; font-size: 16px; margin-top: 50px; box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.25), 0 0 4px 2px rgba(0, 0, 0, 0.05); transform: translateY(-2px); cursor: pointer; } .flip-horizontal-bottom {}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div id="accordion" > <h3>Click on the next button to see the next idioms in German. Click on the idiom to see the equivalent in English</h3> <br> <h4 id="accordion-toggle"></h4> <div id="accordion-content"> <p></p> </div> <div align="center"> <br> </div> <button id="Next" >Next card</button> </div> </body>

Answer 2

Add this function to your onNextClick() function

function changeColor() {
    var randomColor = () => Math.floor(Math.random()*16777215).toString(16);
    const element = document.getElementById('accordion-toggle');
    element.style.background = `linear-gradient(135deg, #${randomColor()} 0%, #${randomColor()} 100%)`;
}

Above function will generate a randon color and apply to the element. You could also make the fuction generic in order to apply the same to the hidden card.

 var idioms = [ "Das Frushstuck <br><br> 🍓 ", "Strawberry", "Das Auto <br><br>🚗 ", "Car", "Der Stuhl<br><br> 🪑", "Chair", "Die Jacke<br><br> 🧥 ", "The Jacket", "Der asd<br><br>👩‍💼", "asd", "test<br><br> 🐝 ", "test1" ] ; var index = 0; var increment = 2; var $accordion_toggle = $('#accordion-toggle'); var $accordion_content = $('#accordion-content'); function incrementIndex () { index += increment; if (index >= idioms.length) { index = 0; } } function changeColor() { var randomColor = () => Math.floor(Math.random()*16777215).toString(16); const element = document.getElementById('accordion-toggle'); element.style.background = `linear-gradient(135deg, #${randomColor()} 0%, #${randomColor()} 100%)`; } function decrementIndex () { index -= increment; if (index < 0) { index = (idioms.length - increment); } } function updateIdioms () { $accordion_toggle.html(idioms[index]); $accordion_content.html(idioms[index + 1]); } function onNextClick () { $accordion_content.slideUp(function () { incrementIndex(); updateIdioms(); changeColor(); }); } function onPreviousClick () { $accordion_content.slideUp(function () { decrementIndex(); updateIdioms(); }); } $(function () { updateIdioms(); $('#Next').click(onNextClick); // $('#Next').click(changeColor); $('#Previous').click(onPreviousClick); $accordion_toggle.click(function () { $accordion_content.slideToggle('fast'); }); });

 #accordion-toggle { cursor: pointer; margin: auto; margin-top:20px; font-size: 25px; margin-top: 50px; font-family: 'Ubuntu', sans-serif; background: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); height: 100px; width: 200px; text-align: middle; padding: 30px; border-radius: 30px; color: black; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4), 0 0 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; /* ---------------------------------------------- * Generated by Animista on 2020-11-13 13:16:23 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation flip-horizontal-bottom * ---------------------------------------- */ @-webkit-keyframes flip-horizontal-bottom { 0% { -webkit-transform: rotateX(0); transform: rotateX(0); } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @keyframes flip-horizontal-bottom { 0% { -webkit-transform: rotateX(0); transform: rotateX(0); } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } } } #accordion-toggle:hover { cursor: pointer; margin: auto; font-size: 2; font-family: 'Ubuntu', sans-serif; margin-top: 50px; background: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); height: 100px; width: 200px; text-align: middle; padding: 30px; border-radius: 30px; color: black; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4), 0 0 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.25), 0 0 4px 2px rgba(0, 0, 0, 0.05); transform: translateY(-2px); } @import url ("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap"); #accordion-content { font-family: 'Ubuntu', sans-serif; display: none; font-size: 22px; cursor: pointer; margin: auto; font-size: 2; margin-top: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 60px; width: 150px; text-align: middle; padding: 30px; border-radius: 30px; color: black; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4), 0 0 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; } #accordion-content.default { font-family: 'Ubuntu', sans-serif; display: block; } #accordion { font-family: 'Ubuntu', sans-serif; text-align: center; } button { background-color: darkgreen; /* Green */ border-radius: 50px; border: none; color: white; padding: 13px 50px; text-align: center; text-decoration: none; display: inline; font-size: 16px; margin-top: 50px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4), 0 0 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; } button:hover { background-color: green; /* Green */ border-radius: 50px; border: none; color: white; padding: 13px 50px; text-align: center; text-decoration: none; display: inline; font-size: 16px; margin-top: 50px; box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.25), 0 0 4px 2px rgba(0, 0, 0, 0.05); transform: translateY(-2px); cursor: pointer; } .flip-horizontal-bottom {}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div id="accordion" > <h3>Click on the next button to see the next idioms in German. Click on the idiom to see the equivalent in English</h3> <br> <h4 id="accordion-toggle"></h4> <div id="accordion-content"> <p></p> </div> <div align="center"> <br> </div> <button id="Next" >Next card</button> </div> </body>