Según el título en mi código a continuación, tengo 4 divs que contienen 4 números diferentes. Lo que quiero es cuando hago clic en cada div, la cantidad del div en el que se hizo clic se insertará en el campo de entrada. Mi problema es que cuando hago clic en cualquiera de los divs, pasa todas las cantidades en el campo de entrada. Aquí está mi código:
$(".btn-amount").each(function() { $(this).click(function() { var btnCreditsAmount = $(".hero-text").text(); $('#amountInput').val(btnCreditsAmount); }); }); .btn-amount { min-width: 80px; text-align: center; padding: 0.5rem; border: 1px solid #ccc; float: left; margin: 5px; border-radius: 6px; cursor: pointer; font-weight: bold; background: #f2f4f8; } .form-group { display: block; clear: both; width: 360px; overflow: hidden; position: relative; } .input-field { width: 100%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="btn-amount"> <div class="hero-text">10</div> </div> <div class="btn-amount"> <div class="hero-text">20</div> </div> <div class="btn-amount"> <div class="hero-text">40</div> </div> <div class="btn-amount"> <div class="hero-text">80</div> </div> <div class="form-group"> <input type="number" id="amountInput" class="input-field" placeholder="Amount of credits"> </div>No necesita .each loop, simplemente puede adjuntar un controlador de click en cada .btn-amount y encontrar el .hero-text e insertarlo en el Inputbox de entrada.
$(this).find(".hero-text").text(); dará la cantidad del botón pulsado. Entonces, su controlador de clics debería verse así
$(".btn-amount").click(function() { var btnCreditsAmount = $(this).find(".hero-text").text(); $('#amountInput').val(btnCreditsAmount); });Código de trabajo a continuación
$(".btn-amount").click(function() { var btnCreditsAmount = $(this).find(".hero-text").text(); $('#amountInput').val(btnCreditsAmount); }); .btn-amount { min-width: 80px; text-align: center; padding: 0.5rem; border: 1px solid #ccc; float: left; margin: 5px; border-radius: 6px; cursor: pointer; font-weight: bold; background: #f2f4f8; } .form-group { display: block; clear: both; width: 360px; overflow: hidden; position: relative; } .input-field { width: 100%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="btn-amount"> <div class="hero-text">10</div> </div> <div class="btn-amount"> <div class="hero-text">20</div> </div> <div class="btn-amount"> <div class="hero-text">40</div> </div> <div class="btn-amount"> <div class="hero-text">80</div> </div> <div class="form-group"> <input type="number" id="amountInput" class="input-field" placeholder="Amount of credits"> </div>Tu linea
$(".hero-text")seleccionará todos los elementos de texto héroe. Debe limitarse al que se está haciendo clic.
En el controlador de eventos, al usar function() { , this es el elemento en el que se hizo clic.
Entonces esa línea se convertiría en $(this).text() - sin embargo, cuando se usa .text() incluye todos los espacios en blanco, por lo que dará un error si su html tiene algún tipo de diseño (ya que probablemente comenzará con \n y por lo tanto falla al pasar a .val)
En su lugar, utiliza
var btnCreditsAmount = this.innerText;Fragmento actualizado:
$(".btn-amount").each(function() { $(this).click(function() { var btnCreditsAmount = this.innerText; $('#amountInput').val(btnCreditsAmount); }); }); .btn-amount { min-width: 80px; text-align: center; padding: 0.5rem; border: 1px solid #ccc; float: left; margin: 5px; border-radius: 6px; cursor: pointer; font-weight: bold; background: #f2f4f8; } .form-group { display: block; clear: both; width: 360px; overflow: hidden; position: relative; } .input-field { width: 100%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="btn-amount"> <div class="hero-text">10</div> </div> <div class="btn-amount"> <div class="hero-text">20</div> </div> <div class="btn-amount"> <div class="hero-text">40</div> </div> <div class="btn-amount"> <div class="hero-text">80</div> </div> <div class="form-group"> <input type="number" id="amountInput" class="input-field" placeholder="Amount of credits"> </div>