Question

如果我根据id进行点击，则会添加边框和背景颜色。如果我根据按钮的ID进行另一次点击，它应该将边框和背景颜色更改为另一种颜色，但点击按钮不能将颜色从绿色更改为黑色。我无法理解为什么。我的代码片段如下。永远不会评估if语句。

先谢谢你

＆＃13;

if ($(".g_card").on('click', function() {
  $('#addon_1').addClass('baddon_1add');
  $("#gift_occasion").toggle();
}));

if ($("#work").on('click', function() {
  alert("button not working");
  $('#addon_1').removeClass('baddon_1add').addClass('.baddon_1');
}));

＆＃13;

.baddon_1 {
  border: solid 1px #808080;
  background-color: #FFFFFF;
}
.baddon_1add {
  border: solid 2px #2D6E20;
  background-color: #EFF7ED;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="g_card">
  <input type='button' id="work" value='-' class='qtyminus' field='quantity' />
  <input type='text' id="g_quantity" name='quantity' value='0' class='qty' />
  <input type='button' id="some_occasion" value='+' class='qtyplus' field='quantity' />
  <br />
  <div id="gift_occasion" style="display:none">
    <select>
      <option>Occasion</option>
    </select>
  </div>
</div>

＆＃13;

Answer 1

$(".g_card").on('click', function() {
  $('#addon_1').addClass('baddon_1add');
  $("#gift_occasion").toggle();
});

$("#work").on('click', function(e) {
  e.stopPropagation();
  $('#addon_1').removeClass('baddon_1add').addClass('baddon_1');
});

.baddon_1 {
  border: 1px solid  #808080;
  background-color: #FFFFFF;
}
.baddon_1add {
  border: 2px solid #2D6E20;
  background-color: #EFF7ED;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="g_card">
  <input type='button' id="work" value='-' class='qtyminus' field='quantity' />
  <input type='text' id="g_quantity" name='quantity' value='0' class='qty' />
  <input type='button' id="some_occasion" value='+' class='qtyplus' field='quantity' />
  <br />
  <div id="gift_occasion" style="display:none">
    <select>
      <option>Occasion</option>
    </select>
  </div>
</div>
<div id="addon_1">I added this div to with ID addon_1.</div>

我不确切知道#addon_1应该在哪里。但我认为你的问题在于事件传播。我已将e.stopPropagation()添加到减号按钮事件处理程序中。这可以防止事件冒泡并在父级上执行单击处理程序。请参阅代码段中的结果。

我还删除了事件处理程序setter周围的IF，它们在此上下文中毫无意义。这段代码负责取消冒泡。

function(e) {
  e.stopPropagation();
}

事件将它的事件对象作为参数传递，我们通过e引用它。我们打电话给stopPropagation，以阻止事件冒泡。

一般课程：

如果您在父级上设置多个点击处理程序，并且子级使用event.stopPropagation()在子级上运行事件，而不是在父级上运行。

输入按钮单击时出现问题

1 个答案: