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

Question

The first function shows the .check div if any of the inputs that have data-target="check" are checked.

Now I am trying to simulate the same checked / unchecked states of the checkboxes and have the function work the same way but for buttons that are clicked and then un-clicked by pressing the #clear button.

 $('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> 

Answer 1

You are doing a couple of things that are keeping this from working. One is how you're comparing objects - now how I used !$(this).is(clear) , and the other is that you keep redefining target inside the $('button').on ... function. Here is how it should look, I changed the variable name for clarity:

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