简化jquery中用于激活项的冗余脚本

Question

我有3行标记几乎相同的项(svg及其描述(；我刚刚为每个容器提供了一个额外的标识类，以便区分它们。我想要这样，当我点击一行中一个项目的svg时，它不会停用其他项目。每一行中发生的事件应该相互独立。

$('.container-a .holder').on('click', function() {
var itemId = $(this).attr('data-itemid');
console.log(itemId);
$('.holder').removeClass('activated');
$('.container-a .description').removeClass('activated');
$('.item-'+itemId).addClass('activated');
});
$('.container-b .holder').on('click', function() {
var itemId = $(this).attr('data-itemid');
console.log(itemId);
$('.holder').removeClass('activated');
$('.container-b .description').removeClass('activated');
$('.item-'+itemId).addClass('activated');
});
$('.container-c .holder').on('click', function() {
var itemId = $(this).attr('data-itemid');
console.log(itemId);
$('.holder').removeClass('activated');
$('.container-c .description').removeClass('activated');
$('.item-'+itemId).addClass('activated');
});

这是我以前使用的方法，然而，它在单击某个内容后会停用其他所有内容，而不仅仅是停用行中的其他所有内容。

$('.holder').on('click', function() {
var itemId = $(this).attr('data-itemid');
console.log(itemId);
$('.holder').removeClass('activated');
$('.description').removeClass('activated');
$('.item-'+itemId).addClass('activated');
});

这是我的html

<div class="container-a container">
<div class="img-container">
<div class="holder">
<img src="src.svg">
</div>
<div class="holder">
<img src="src.svg">
</div>
<div class="holder">
<img src="src.svg">
</div>
</div>
<div class="desc-container">
<div class="description">
<p>text</p>
</div>
<div class="description">
<p>text</p>
</div>
<div class="description">
<p>text</p>
</div>
</div>
</div>

<div class="container-b container">
<div class="img-container">
<div class="holder">
<img src="src.svg">
</div>
<div class="holder">
<img src="src.svg">
</div>
<div class="holder">
<img src="src.svg">
</div>
</div>
<div class="desc-container">
<div class="description">
<p>text</p>
</div>
<div class="description">
<p>text</p>
</div>
<div class="description">
<p>text</p>
</div>
</div>
</div>
<div class="container-c container">
<div class="img-container">
<div class="holder">
<img src="src.svg">
</div>
<div class="holder">
<img src="src.svg">
</div>
<div class="holder">
<img src="src.svg">
</div>
</div>
<div class="desc-container">
<div class="description">
<p>text</p>
</div>
<div class="description">
<p>text</p>
</div>
<div class="description">
<p>text</p>
</div>
</div>
</div>

有没有什么方法可以把它分解成一个点击功能而不是3个？

Answer 1

如果您提供html代码，您会给我们更多的帮助机会，但现在您可以尝试

function change(element){
var itemId = element.attr('data-itemid');
console.log(itemId);
$('.holder').removeClass('activated');
$(element).find('.description').removeClass('activated');
$('.item-'+itemId).addClass('activated');
}
$('.container-a .holder').on('click', function() {
change(this);
});

Answer 2

基本上，这一切都归结为找到一种选择description元素的方法。

我相信这会奏效：

$('.holder').on('click', function() {
var itemId = $(this).attr('data-symptomid');
console.log(itemId);
$('.holder').removeClass('activated');
//$('.container-c .description').removeClass('activated');
$(this).find('.description').removeClass('activated');
$('.item-'+itemId).addClass('activated');
});

Answer 3

您可以将代码的一部分移动到通用函数：

$('.container-a .holder').on('click', function() {
updateClasses('.container-a .description', $(this).attr('data-itemid'));
});
$('.container-b .holder').on('click', function() {
updateClasses('.container-b .description', $(this).attr('data-itemid'));
});
$('.container-c .holder').on('click', function() {
updateClasses('.container-c .description', $(this).attr('data-itemid'));
});
function updateClasses(container, itemId) {
console.log(itemId);
$('.holder').removeClass('activated');
$(container).removeClass('activated');
$('.item-' + itemId).addClass('activated');
}

请注意，它可能更简单，这取决于HTML文件的外观。