¿Hay alguna manera de agrupar varias variables y hacer clic en eventos en una función?
Me gustaría tener solo una función que llamara a todas las clases con el mismo nombre pero con números diferentes (del 1 al 3 en este caso) para no tener que hacer múltiples funciones como esta:
function step1() { $("#step-1").fadeIn(); } function step2() { $("#step-2").fadeIn(); } function step3() { $("#step-3").fadeIn(); }Y
$("#step-1-btn").click(function(){ step1(); }); $("#step-2-btn").click(function(){ step2(); }); $("#step-3-btn").click(function(){ step3(); });Estoy seguro de que ya hay una respuesta a esta pregunta, pero no puedo formularla lo suficientemente bien como para encontrarla...
No tengo 100% claro lo que quieres lograr, pero puedes intentar algo como esto:
$("button[id^=step-]").click(function() { var id = $(this).attr("id").split('-')[1] step(id); }); function step(num) { console.log("you called step with number:" + num) } El evento de clic funcionará para cualquier botón donde la id comience con step- . Luego dividirá la identificación y tomará el número de ella y la pasará a su función.
Demostración (con ejemplo de fundido)
$("button[id^=step-]").click(function() { var id = $(this).attr("id").split('-')[1] step(id); }); function step(num) { console.log("you called step with number:" + num) $('div[id^=step-]').hide(); $("#step-"+num).fadeIn(); } #step-1,#step-2,#step-3 { height:200px; width:200px; display:none; background-color:yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="step-1-btn">step 1</button> <button id="step-2-btn">step 2</button> <button id="step-3-btn">step 3</button> <div id="step-1">1</div> <div id="step-2">2</div> <div id="step-3">3</div>No use números enteros confidenciales eliminados de classNames, ID, etc. Es una codificación sucia y propensa a errores.
Aquí hay una sugerencia mucho mejor, use el atributo de datos en su lugar, donde el selector para desvanecerse se almacena justo dentro de un atributo data-show :
$("[data-show]").on("click", function() { const selector = $(this).data("show"); $(selector).fadeIn(); }); .step { display: none; } <button type="button" data-show="#step-1">1</button> <button type="button" data-show="#step-2">2</button> <button type="button" data-show="#step-3">3</button> <div class="step" id="step-1">Step 1</div> <div class="step" id="step-2">Step 2</div> <div class="step" id="step-3">Step 3</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Documentos: