Question

<div class="card">
  <div id="name" class="badge">
    <div id="address" class="badge">
    </div>
    <select id="font-size">
      <option value="12">12</option>
      <option value="14">14</option>
      <option value="18">18</option>
    </select>

我有主要的div与类“卡”里面有许多其他div。我想从下拉列表中更改div的字体大小。

jQuery代码是：

$(".badge").click(function(){
    var id = this.id;//get clicked id

    $("#font-size").change(function(){
       $("#"+id).css('font-size', $(this).val()+"px");//change font according to the clicked element
    });
});

我的问题是，当点击第一个div（名称）时，一切正常。但是当点击第二个div时，第一个div也被绑定。并且两者都改变了字体大小。我希望字体大小根据点击的div单独更改。

Answer 1

如果要在单击div时更改字体大小

$(".badge").click(function(){
   var id = this.id;//get clicked id

   $("#"+id).css('font-size', $('#font-size').val()+"px");
});

你正在做的是每次你爬上div时都会把一个事件处理程序附加到选择。

当您单击div时，此代码会将单击的潜水的字体大小更改为在组合框中选择的值。看这里http://jsfiddle.net/s55Dy/

Answer 2

试试这个：

var id;

$(".badge").click(function(){
   id = this.id;
});

$("#font-size").change(function(){
   if (id) $("#"+id).css('font-size', $(this).val()+"px");
});

如何使用下拉列表中的jquery更改字体大小

2 个答案: