Question

你好，我需要一些小帮助。当我单击前5个按钮之一（这些按钮没有值（如输入字段））时，将显示具有3个数字1、2和3的按钮组。当我单击这些按钮之一时，我单击的按钮的值（数字）将覆盖我首先单击的按钮的值（文本）。我的问题：所有按钮均已从我点击的数字的值（文本）中覆盖。

$(function() {

  var l = $("div.col-xs-12").length;

  function getRndInteger(min, max) {
    return Math.round(Math.random() * (max - min)) + min;
  }

  $("div#gr.btn-group").hide();

  $(".bt").click(function() {
    $("div#gr.btn-group").show();
  });


  $(".btt").click(function() {
    $('.bt').text($(this).text());
    $("div#gr.btn-group").hide();
  });

});

.btn-group button {
  background-color: #103c52;
  border: 1px solid #1b1d1b;
  color: white;
  padding: 10px 24px;
  cursor: pointer;
  float: left;
  border-radius: 10px;
  margin-left: 5px;
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: #3e8e41;
}

button.bt,
button.btt {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 60px;
  height: 40px;
  border: 2px solid black;
  border-radius: 5px;
}

button.bt {
  font-size: 25px;
  /* text-align: center; */
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="jquery-ui.min.js"></script> -->

<script src="https://www.google.com/cloudprint/client/cpgadget.js">
</script>
<!--   <link rel="stylesheet" href="jquery-ui.min.css"> -->
<!--google font api garamond-->
<link href="https://fonts.googleapis.com/css?family=Song+Myung" rel="stylesheet">


<div class="col-xs-12 " style="text-align: center;">
  <button class="bt"></button><br>
  <button class="bt"></button><br>
  <button class="bt"></button><br>
  <button class="bt"></button><br>
  <button class="bt"></button><br>
</div>
<div class="container-fluid">
  <div class="col-xs-12 " style="text-align: center;">
    <div class="btn-group" id="gr">
      <button class="btt">1</button>
      <button class="btt">2</button>
      <button class="btt">3</button>
    </div>
  </div>
</div>

Answer 1

发生这种情况是因为您正在将文本分配给此语句中的所有按钮：

$('.bt').text($(this).text());

您可以改为存储对占位符按钮的引用（请参见以下代码段中的clicked变量），然后单击值按钮时，将文本仅分配给已保存的引用

$(function() {
  var l = $("div.col-xs-12").length;
  var clicked = null;

  function getRndInteger(min, max) {
    return Math.round(Math.random() * (max - min)) + min;
  }

  $("div#gr.btn-group").hide();

  $(".bt").click(function() {
    clicked = $(this);
    $("div#gr.btn-group").show();
  });

  $(".btt").click(function() {
    clicked.text($(this).text());
    clicked = null;
    $("div#gr.btn-group").hide();
  });
});

.btn-group button{background-color:#103c52;border:1px solid #1b1d1b;color:#fff;padding:10px 24px;cursor:pointer;float:left;border-radius:10px;margin-left:5px}.btn-group:after{content:"";clear:both;display:table}.btn-group button:not(:last-child){border-right:none}.btn-group button:hover{background-color:#3e8e41}button.bt,button.btt{font-family:inherit;font-size:inherit;line-height:inherit;width:60px;height:40px;border:2px solid #000;border-radius:5px}button.bt{font-size:25px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-xs-12 " style="text-align: center;">
  <button class="bt"></button><br>
  <button class="bt"></button><br>
  <button class="bt"></button><br>
  <button class="bt"></button><br>
  <button class="bt"></button><br>
</div>

<div class="container-fluid">
  <div class="col-xs-12 " style="text-align: center;">
    <div class="btn-group" id="gr">
      <button class="btt">1</button>
      <button class="btt">2</button>
      <button class="btt">3</button>
    </div>
  </div>
</div>

PS：我已从代码段中删除了多余的CSS / JS文件，以使代码段看起来清晰。

当我从按钮组中单击一个按钮时，更改许多按钮的值（文本）

1 个答案: