javascript - 通过 JQuery .change 重新加载 javascript 函数会添加之前运行中的变量

Question

我想动态更改字体，但我的代码只有在第一次更改字体时才表现良好。看来我的代码会记住以前单击的按钮，并在每次为按钮选择新字体时添加要更改的按钮。我的代码可在jsfiddle获取

function font(id,element){
  $(id).bind('change',function(){
    var fontTypeSelected = $(id).val();
    $(element).css('font-family',fontTypeSelected);
  });
}

$('#settings-ID').change(function(){
  font('#font','#' + $('#settings-ID').val());
});
         
$('.list').on('click','.settings',function(){
  // Set current row or box section ID
  $('#settings-ID').val($(this).attr('id'));
  $("#settings-ID").trigger("change");
});

.list div {
  float:left;
  padding:10px;
  background-color:#CCC;
  margin:10px 10px 0 0;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click on one of the buttons below to change font
<div class="list">
  <div class="settings" id="1">Font one</div>
  <div class="settings" id="2">Font two</div>
</div>
<br>Selected button ID: <input type="text" id="settings-ID" placeholder="None selected"><br>
<br>
<select class="form-control" id="font">
  <option>Arial</option>
  <option>Courier</option>
  <option>Verdana</option>
  <option>Times new roman</option>
</select>

我真的希望有人能帮助我解决这个问题。我有点被困在这里了。

Answer 1

调用函数时您正在定义多个更改事件

在定义下一个更改事件之前，使用 .unbind("change") 删除更改​​事件。

function font(id,element){
  $(id).unbind('change').bind('change',function(){
    var fontTypeSelected = $(id).val();
    $(element).css('font-family',fontTypeSelected);
  });
}