简化jQuery中的多余脚本来激活项目

Question

我有3行项目（svgs及其描述），几乎相同的标记;我刚刚给每个容器一个额外的识别类，以区分它们。我需要它，以便当我点击一行中的一个项目的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

您可以将代码的一部分转移到一般的功能：

$('.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文件的外观。

Answer 3

基本上，这一切都归结为找到一种方法来选择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'); 
});