输入按钮单击时出现问题

If I do a click based on id a border and background color is added. If I do another click based on id of button it should change the border and background color to another color but the click for button is not working to change color from green to black. I can't figure why. My code snippet is below. The if statement is never evaluated.

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

Thank You In Advance

先谢谢你

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');
}));

.baddon_1 {
  border: solid 1px #808080;
  background-color: #FFFFFF;
}
.baddon_1add {
  border: solid 2px #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>

1 个解决方案

#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>

I do not know exactly where #addon_1 is supposed to be. But I think your problem lays with event propagation. I've added e.stopPropagation() to your minus button event handler. This prevents the event from bubbling up and executing the click handler on the parent. See the result in the snippet.

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

I also deleted the IFs around the event handler setters, they are pointless in this context. This piece of code is responsible for the canceling of the bubbling.

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

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

The event passes it's event object as an argument, we reference it via e. We call stopPropagation, to stop the event bubbling up.

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

General lesson:

总课：

If you set multiple click handlers on the parent and the childs use event.stopPropagation() to run an event on the child, but not on the parent.

如果在父级上设置多个单击处理程序，则子级使用event.stopPropagation（）在子级上运行事件，而不在父级上运行。