javascript - 选择独特的项目并将它们标记为js

Question

我有多个按类名相互匹配的图像和数字，每个数字都有对应的图像，所以我有多个对，当我选择一个图像或数字时都需要具有相同的 css 类

   $('p[class^="pieza"], div[class^="pieza"]').on('click', function(e) {
    // remove class to all elements
    $('p[class^="pieza"], div[class^="pieza"]').removeClass('shadow');
    
    // add class to all elements having current class....
     $('.' + e.target.classList.toString().addClass('shadow');

如果我单击数字，代码工作正常，数字和图像被选中并具有相同的 css 类

但是当我点击任何图片时，他们都得到了课程并且它的号码匹配不

标签： javascripthtmljqueryclass

Answer 1

寻找独特的元素并不值得太多。

您可以直接使用当前点击的元素类：

$('p[class^="pieza"], div[class^="pieza"]').not(':has(img)').on('click', function(e) {
    // remove class to all elements
    $('p[class^="pieza"], div[class^="pieza"]').not(':has(img)').removeClass('redColor');

    // add class to all elements having current class....
    $('.' + e.target.classList.toString()).not(':has(img)').addClass('redColor');
})

.redColor {
    background-color: red;;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="pieceRow1">
    <p class="pieza18" id="pieza18">18</p>
    <p class="pieza17" id="pieza17">17</p>
    <p class="pieza16" id="pieza16">16</p>
    <p class="pieza15" id="pieza15">15</p>
</div>

<div class="fila1 d-flex justify-content-center">
    <div class="pieza18 "><img class="img-responsive" src="../../imagenes/caraDentalVacia.png" alt="">
    </div>
    <div class="pieza17"><img class="img-responsive" src="../../imagenes/caraDentalVacia.png" alt="">
    </div>
    <div class="pieza16"><img class="img-responsive" src="../../imagenes/caraDentalVacia.png" alt="">
    </div>
    <div class="pieza17"><img class="img-responsive" src="../../imagenes/caraDentalVacia.png" alt="">
    </div>
</div>