div onclick 内部内容不可点击？

Question

当我点击 div-2 时，我想显示 div-2。我正在使用 Jquery 索引并且它可以工作，但是当我将其他内容/html 放在单击 div 中时，无论单击什么按钮，它总是显示 div-1。在下面的小提琴示例中，如果您单击 green 内部 div，您将看到结果。

我假设这是一个索引或传播问题，这可以纠正还是我在推动功能的极限？

https://jsfiddle.net/1e230w8s/

// Matches and shows Butts to index order.
let $games = $('.game');

$('.butts').on('click', e => {
  let $target = $games.eq($(e.target).index()).show();  
  $games.not($target).hide();
});

// Finds all Butts and calls `sumBoxes` onclick
const boxes = document.getElementsByClassName("butts");
for (let butts of boxes){ butts.addEventListener("click", sumBoxes); }

// sumBox Calculates each visible Box 
function sumBoxes(event) {
  var total = 0;
  $('.box:visible').each(function() {
    total += parseInt($(this).text());
  });
  $('.sum').html("Total : " + total); // Replaces contents of `.sum`
}

body {background: #eeeeee;}

.game {display:none;}

.box {float: left;font: bold 17px arial;text-align: center;margin: 10px 10px 20px 0;padding: 10px 25.54px;background: #fff;color: blue}

.butts {cursor:pointer; width:200px;height:40px;background:#fff; margin-bottom:10px; margin-right:10px; float:left;border:1px solid blue;}

.sum {clear:both;margin-top:40px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="float: left;width: 100%;">
   <div class="butts">1 <div style="float:right;width:40px;height:20px;background:lightgreen;">1</div></div>
   <div class="butts">2 <div style="float:right;width:40px;height:20px;background:lightgreen;">2</div></div>
   <div class="butts">3 <div style="float:right;width:40px;height:20px;background:lightgreen;">3</div></div>
</div>

<div class="container">
   <div class="game">
     <div class="box">1 Box</div>
   </div>
  <div class="game">
    <div class="box">2 Box</div>
  </div>
    <div class="game">
    <div class="box">3 Box</div>
  </div>
</div>

<div class="sum"></div>

Answer 1

在您当前的代码中，您使用了e.target，因此当您单击子 div 时，当前目标将是内部 div 标记，根据您的代码，它的值将是 0，这就是为什么只显示第一个。相反，您可以检查e.target 是否有butts 类，具体取决于此更改您的选择器。

演示代码：

// Matches and shows Butts to index order.
let $games = $('.game');

$('.butts').on('click', e => {
  //check is target has class .butts 
  var target = $(e.target).hasClass("butts") ? $(e.target) : $(e.target).closest(".butts")
 let $target = $games.eq(target.index()).show();
  $games.not($target).hide();
});

body {
  background: #eeeeee;
}

.game {
  display: none;
}

.box {
  float: left;
  font: bold 17px arial;
  text-align: center;
  margin: 10px 10px 20px 0;
  padding: 10px 25.54px;
  background: #fff;
  color: blue
}

.butts {
  cursor: pointer;
  width: 200px;
  height: 40px;
  background: #fff;
  margin-bottom: 10px;
  margin-right: 10px;
  float: left;
  border: 1px solid blue;
}

.sum {
  clear: both;
  margin-top: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="float: left;width: 100%;">
  <div class="butts">1
    <div style="float:right;width:40px;height:20px;background:lightgreen;">1</div>
  </div>
  <div class="butts">2
    <div style="float:right;width:40px;height:20px;background:lightgreen;">2</div>
  </div>
  <div class="butts">3
    <div style="float:right;width:40px;height:20px;background:lightgreen;">3</div>
  </div>
</div>

<div class="container">
  <div class="game">
    <div class="box">1 Box</div>
  </div>
  <div class="game">
    <div class="box">2 Box</div>
  </div>
  <div class="game">
    <div class="box">3 Box</div>
  </div>
</div>

<div class="sum"></div>