如果按下按钮组,则jQuery显示/隐藏div

时间:2019-02-04 07:16:42

标签: javascript jquery

如果选中任何具有.check的输入,则第一个函数将显示data-target="check" div。

现在,我正在尝试模拟复选框的相同checked / unchecked状态,并使该函数以相同的方式工作,但对于buttons依次为clickedun-clicked按下#clear按钮。

$('input').on('change', function() {
  var source = $(this);
  var target = $('.' + source.attr('data-target'));
  if ($('input[data-target=' + source.attr('data-target') + ']:checked').length) target.show();
  else target.hide();
});
$('button').on('click', function() {
  var clear = $("#clear");
  if ($(this) !== clear) {
    var source = $(this);
    var target = $('.' + source.attr('data-target'));
    if ($('button[data-target=' + source.attr('data-target') + ']').length) target.show();
  } else {
    if ($(this) === clear) {
      target.hide();
    }
  }
});
div {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="name" data-target="check" value="1">
<input type="checkbox" name="name" data-target="check" value="2">
<input type="checkbox" name="name" data-target="check" value="3">
<button data-target="button" value="4"></button>
<button data-target="button" value="5"></button>
<button id="clear">clear</button>

<div class="check">check</div>
<div class="button">button</div>

1 个答案:

答案 0 :(得分:1)

您正在做一些事情,使它无法正常工作。一种是您如何比较对象-现在如何使用!$(this).is(clear),另一种是您继续在$('button').on ...函数中重新定义目标。这是它的外观,为清楚起见,我更改了变量名称:

var button_target;
$('input').on('change', function() {
  var source = $(this);
  var target = $('.' + source.attr('data-target'));
  if ($('input[data-target=' + source.attr('data-target') + ']:checked').length) target.show();
  else target.hide();
});
$('button').on('click', function() {
  var clear = $("#clear");
  if (!$(this).is(clear)) {
    var source = $(this);
    button_target = $('.' + source.attr('data-target'));
    if ($('button[data-target=' + source.attr('data-target') + ']').length) button_target.show();
  } else {
    if ($(this).is(clear)) {
      button_target.hide();
    }
  }
});