在元素上單擊獲取子元素的文本并使用jquery或純javascript在輸入欄位中傳遞它

根據我下面代碼中的標題，我有 4 個 div，其中包含 4 個不同的數字。我想要的是當我單擊每個 div 時，單擊的 div 的數量將插入到輸入欄位中。我的問題是，當我單擊任何 div 時，它會傳遞輸入欄位中的所有金額。這是我的代碼：

$(".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/[email protected]/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>

uj5u.com熱心網友回復：

你的線

$(".hero-text")

將選擇所有英雄文本元素。您需要限制被點擊的那個。

在事件處理程式中，當使用 時function() {，this是被點擊的元素。

因此該行將變為$(this).text()- 但是，當使用.text()它時，它包含所有空格，因此如果您的 html 具有任何型別的布局，則會出現錯誤（因為它可能會以開頭\n并因此在傳遞給 .val 時失敗）

相反，使用

var btnCreditsAmount = this.innerText;

更新片段：

$(".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/[email protected]/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>

uj5u.com熱心網友回復：

您不需要.each回圈，您只需click在每個上附加處理程式.btn-amount并找到.hero-text并插入Inputbox.

$(this).find(".hero-text").text();將給出點擊按鈕的數量。所以你的點擊處理程式應該是這樣的

$(".btn-amount").click(function() {
    var btnCreditsAmount = $(this).find(".hero-text").text();
    $('#amountInput').val(btnCreditsAmount);
});

下面的作業代碼

$(".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/[email protected]/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>

標籤：javascript html jQuery

上一篇：使用BeautifulSoup決議KML/HTML檔案

下一篇：一旦用戶開始在輸入欄位中書寫，如何隱藏錯誤訊息？