html - div onclick 内部内容不可点击?
问题描述
当我单击 div-2 时,我想显示 div-2。我正在使用 Jquery 索引并且它可以工作,但是当我将其他内容/html 放在单击 div 中时,无论单击什么按钮,它总是显示 div-1。在下面的小提琴示例中,如果您单击绿色的内部 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>
解决方案
在您当前使用的代码中,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>
推荐阅读
- php - 'id_rsa_bblc' 的权限 0644 太开放
- amazon-dynamodb - on dynamoose update ValidationException: 键上的条件数无效
- sql - 出版到期日存档记录
- python - tensorflow.python.framework.errors_impl.UnknownError:重命名失败:输入/输出错误
- c# - 如何在不更改 C# 中的密钥的情况下将 RSAParameters 密钥导入和导出到文件
- apache-spark - 可以使用 Sqoop 在 IMPORT 上执行连接吗?
- grpc - gRPC Stackdriver 问题
- python - Python Selenium - 获取href值
- java - 春季启动 2. Java 10. JUnit。org.slf4j 包可以从多个模块访问:
, slf4j.api - c++ - 使用cmake,我如何将第三方库链接到我自己的程序(找到项目,从源代码构建,并安装,链接)