gpt4 book ai didi

javascript - 更改基于数组的元素的类

转载 作者:行者123 更新时间:2023-11-28 04:46:40 25 4
gpt4 key购买 nike

我有大约 20-100 个元素,每个元素在文本上都有自己的 ID“xxx_view_ch_&&&”,包裹在 ID 为“xxx_view_&&&”的外部 div 中。当用户单击整个元素(“xxx_view_&&&”)时,我想更改 ID 为“xxx_view_ch_&&&”的元素上的类。

我目前使用这段代码:

$(document).ready(function(){

$('#reci_view_01').click(function(){
$('#reci_view_ch_01').toggleClass('not_active header'); });

$('#reci_view_02').click(function(){
$('#reci_view_ch_02').toggleClass('not_active header'); });

$('#reci_view_03').click(function(){
$('#reci_view_ch_03').toggleClass('not_active header'); });

$('#reci_view_04').click(function(){
$('#reci_view_ch_04').toggleClass('not_active header'); });

$('#reci_view_05').click(function(){
$('#reci_view_ch_05').toggleClass('not_active header'); });

});
.not_active {
text-decoration: line-through !important;
color: darkgray;
font-weight: bold;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">

<div class="ui list">
<a id="reci_view_01" class="item">
<i class="remove circle outline icon"> </i>
<div class="content">
<div id="reci_view_ch_01" class="header">Test 1</div>
</div>
</a>
<a id="reci_view_02" class="item">
<i class="remove circle outline icon"> </i>
<div class="content">
<div id="reci_view_ch_02" class="header">Test 2</div>
</div>
</a>
<a id="reci_view_03" class="item">
<i class="remove circle outline icon"> </i>
<div class="content">
<div id="reci_view_ch_03" class="header">Test 3</div>
</div>
</a>
<a id="reci_view_04" class="item">
<i class="remove circle outline icon"></i>
<div class="content">
<div id="reci_view_ch_04" class="header">Test 4</div>
</div>
</a>
<a id="reci_view_05" class="item">
<i class="remove circle outline icon"></i>
<div class="content">
<div id="reci_view_ch_05" class="header">Test 5</div>
</div>
</a>
</div>

我想制作一个类似“待办事项列表”的列表,我可以在其中选择要添加到其他列表的元素。我认为数组中可能有一种方法,但我对 JavaScript 了解不多。

最佳答案

为此,您可以使用通用类将事件挂接到所有 .item 元素。然后您可以使用 DOM 遍历来find()所需的子元素。

在本例中,我添加了 reci_viewreci_view_ch 类:

$('.reci_view').click(function() {
$(this).find('.reci_view_ch').toggleClass('not_active header');
});
.not_active {
text-decoration: line-through !important;
color: darkgray;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">

<div class="ui list">
<a id="reci_view_01" class="item reci_view">
<i class="remove circle outline icon"> </i>
<div class="content">
<div id="reci_view_ch_01" class="header reci_view_ch">Test 1</div>
</div>
</a>
<a id="reci_view_02" class="item reci_view">
<i class="remove circle outline icon"> </i>
<div class="content">
<div id="reci_view_ch_02" class="header reci_view_ch">Test 2</div>
</div>
</a>
<a id="reci_view_03" class="item reci_view">
<i class="remove circle outline icon"> </i>
<div class="content">
<div id="reci_view_ch_03" class="header reci_view_ch">Test 3</div>
</div>
</a>
<a id="reci_view_04" class="item reci_view">
<i class="remove circle outline icon"></i>
<div class="content">
<div id="reci_view_ch_04" class="header reci_view_ch">Test 4</div>
</div>
</a>
<a id="reci_view_05" class="item reci_view">
<i class="remove circle outline icon"></i>
<div class="content">
<div id="reci_view_ch_05" class="header reci_view_ch">Test 5</div>
</div>
</a>
</div>

关于javascript - 更改基于数组的元素的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43048276/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com