我发现jQuery代码打印出在网格内点击的div,我如何修改这段代码,使它只向点击的div.grid_item添加类“.active”,有人能帮助我理解如何做到这一点吗?
我在下面添加了html和js。
null
$(".grid").click(function(event) {
var hoveredGridItems = $(this).children()
.filter(function() { return $(this).is(":hover"); });
if (hoveredGridItems.length > 0)
console.log(hoveredGridItems[0]);
else
console.log("no element detected!");
});
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
/* styles just for demo */
.grid__item {
background-color: tomato;
color: white;
/* styles for centering text */
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>
null
null
$(".grid__item").click(function(event) {
$(".grid__item").removeClass("active");
$(event.currentTarget).addClass("active");
});
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
/* styles just for demo */
.grid__item {
background-color: tomato;
color: white;
/* styles for centering text */
display: flex;
align-items: center;
justify-content: center;
}
.grid__item.active {
border: 1px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>
问题内容: 我使用此辅助函数来接收我的请求的JSON结果: 我将它作为Web应用程序中url的一部分提供了一些字符串,例如’/ api / getusers’,因此看起来像。现在我需要包含JSON数据,我从URL接收将被分配给我的变量,所以它看起来像这样的字符串结果:。然后,我将处理此JSON数据。问题在于返回响应变量。它是未定义的。谢谢! 问题答案: 这是一个异步操作,这意味着从服务器返回后很长
我有两个超类(和),和一个子类。Dog类有一个所有者setter函数(。我在分配和抽象类类型时遇到问题。 阐明想法的代码示例: 假设我需要像这样使用这3个类,并且两个类具有相同的功能。我该怎么做?
问题内容: 我有一个哈希图,我想复制该哈希图以用于其他用途。但是,每当我复制并重复使用它时,它也会更改原始内容。这是为什么? 提前致谢 问题答案: 您要做的不是创建地图的副本,而是创建地图的副本。当两个引用指向同一对象时,对一个对象的更改将在另一个对象中反映出来。 解决方案1:如果这是从某种简单类型到另一种类型的Map,则应改为: 这称为复制构造函数。几乎所有标准的Collection和Map实现
问题内容: 我有几个提供的接口 和一个实现第一个的类: 如果我不能更改任何接口,那么在保持实现尽可能通用的同时最好的做法是什么? 编辑 我无法中断实例化的其他一些代码, 因此我在实现中也应该有两种通用类型。 问题答案: 问题是显然不是。Java是强类型的,不会允许您执行此类操作。 您可以将其强制转换为,在这种情况下,您仍然会收到有关未经检查的转化的警告。这意味着此转换是 不安全的 。 或直接使用代
主要内容:jQuery Mobile 网格布局,自定义网格,实例,多行,实例,响应式网格,实例jQuery Mobile 网格布局 jQuery Mobile 提供了一套基于 CSS 的分列布局。然而,在移动设备上,由于考虑手机的屏幕宽度狭窄,一般不建议使用分栏分列布局。 但有时您想要将较小的元素(如按钮或导航标签)并排地排列在一起,就像是在一个表格中一样。这种情况下,推荐使用分列布局。 网格中的列是等宽的(合计是 100%),没有边框、背景、margin 或 padding。 这里有四种
本文向大家介绍jQuery给表格添加分页效果,包括了jQuery给表格添加分页效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery表格添加分页的具体代码,供大家参考,具体内容如下 1. 新建一个Table,添加十行数据 2. 引入jQuery 及script代码 3. 另外,附上表格和底部分页码的css样式 4.好了,打开浏览器试试 点击页码可翻页,成功! 更多精彩内容请