Question

我在Bootstrap中有8个div，当我用下面的代码点击它时，我可以改变div的样式;

    $(document).ready(function() {
  $(".continue--btn").hide();

    if ($('.generator--templates').click(function(){
  $('.continue--btn').show();
  $(this).css("background", "#03A9F3");
  $(this).find('.generator--templates__description, .generator--templates__purpose').css("color", "#fff");
})
);

这也显示了一个继续按钮。

然而，接下来我要做的就是当我点击任何地方但div，div获得他的默认样式并且该按钮将再次消失。

我无法绕过这个。

我试过这个：

var templates = document.getElementsByClassName('.generator--templates');

window.onclick = function(event){
  if (event.target == templates){
        templates.style.background = "#fff";
  }
}

Answer 1

首先请注意，您的语法不正确，因为您在click()语句中放置了if处理程序。

其次，templates将是从getElementsByClassName返回的元素的集合。因此，将它与event.target中的元素进行比较永远不会匹配。

要修复此问题，请在document上放置一个点击处理程序并检查目标元素的类，如下所示：

$(document).ready(function() {
  $('.generator--templates').click(function() {
    $('.continue--btn').show();
    $(this).find('.generator--templates__description, .generator--templates__purpose').addBack().addClass('active');
  })

  $(document).on('click', function(e) {
    var $target = $(this);
    if ($target.is('.generator--templates') || $target.closest('.generator--templates').length) {
      $('.continue--btn').hide();
      $('.generator--templates').removeClass('active');
    }
  });
});

.continue--btn { 
  display: none;
}

.generator--templates.active,
.generator--templates__description.active,
.generator--templates__purpose.active {
  color: #FFF;
}

注意在这里使用CSS代替css()，尽可能避免使用CSS，因为它将JS逻辑与UI紧密联系起来。

Answer 2

请试试这个：

$(".continue--btn").hide();
$('.generator--templates').click(function() {
  // reset the sibling elements
  $(this).siblings('.generator--templates').each(function(i, el) {
    $(el).find('.continue--btn').hide();
    $(el).css('background', 'rgba(0, 0, 0, 0.2)');
    $(el).find('.generator--templates__description, .generator--templates__purpose').css("color", "transparent");
  });
  // apply changes to clicked item
  $(this).find('.continue--btn').show();
  $(this).css("background", "#03A9F3");
  $(this).find('.generator--templates__description, .generator--templates__purpose').css("color", "#fff");
});
$('.body').click(function(e) { // change '.body' to 'body' for your code
  var $target = jQuery(e.target);
  if ($target.hasClass('generator--templates') ||
    $target.closest('.generator--templates').length > 0) {
    // Clicked on a box
  } else { // Clicked elsewhere
    $('.generator--templates').each(function(i, el) {
      $(el).find('.continue--btn').hide();
      $(el).css('background', 'rgba(0, 0, 0, 0.2)');
      $(el).find('.generator--templates__description, .generator--templates__purpose').css("color", "transparent");
    });
  }
});

.body {
  /* added just for display */
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 500px
}

.generator--templates {
  background-color: rgba(0, 0, 0, 0.2);
  width: 150px;
  height: 150px;
  float: left;
  margin-right: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="body">
  <div class="container-element">
    <div class="generator--templates one">
      <button class="continue--btn">Continue</button>
    </div>
    <div class="generator--templates two">
      <button class="continue--btn">Continue</button>
    </div>
    <div class="generator--templates three">
      <button class="continue--btn">Continue</button>
    </div>
  </div>
</div>

检测到单击div时更改div的样式

2 个答案: