JQuery 可点击的 div 使用通配符切换内容

Question

我正在尝试制作可点击的 DIV 组 （"card_ABC110-"） 以在"产品详细信息"区域中切换显示其各自的内容。id是根据其类别代码（即ABC，BBC等）循环生成的。因此，当前以"card_ABC110-"开头的 id 组接下来可能会变成"card_BBC221-*"。

为了获得用于切换的确切 id，我不确定如何编写 JQuery 以使用通配符提取部分 id 名称，并使用作为循环中变量的类别代码。

这是我重复的 HTML 块：

<div class="product-cards">
    <div id="card_ABC110-AD" class="displayCardSelected">
        <a href="#cardDetail_ABC110-AD">ABC110-AD</a><br>
            ABC 110 (AD)
    </div>
    <div id="card_ABC110-BG" class="displayCard">
        <a href="#cardDetail_ABC110-BG">ABC110-BG</a><br>
            ABC 110 (BG)
    </div>
    <div id="card_ABC110-CE" class="displayCard">
        <a href="#cardDetail_ABC110-CE">ABC110-CE</a><br>
            ABC 110 (CE)
    </div>                                          
</div>
<div class="product-Detail">
    <div id="cardDetail_ABC110-AD" class="content" style="display: block;">
    Product ABC110-AD Info
    </div>  
    <div id="cardDetail_ABC110-BG" class="content" style="display: none;">
    Product ABC110-BG Info
    </div>
    <div id="cardDetail_ABC110-CE" class="content" style="display: none;">
    Product ABC110-CE Info
    </div>
</div>

谢谢！

Answer 1

$("a").click(function() {
  var elemId = $(this).attr('href')
  $('.product-Detail div').hide();
  $(elemId).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-cards">
  <div id="card_ABC110-AD" class="displayCardSelected">
    <a href="#cardDetail_ABC110-AD">ABC110-AD</a>
    <br>ABC 110 (AD)
  </div>
  <div id="card_ABC110-BG" class="displayCard">
    <a href="#cardDetail_ABC110-BG">ABC110-BG</a>
    <br>ABC 110 (BG)
  </div>
  <div id="card_ABC110-CE" class="displayCard">
    <a href="#cardDetail_ABC110-CE">ABC110-CE</a>
    <br>ABC 110 (CE)
  </div>
</div>
<div class="product-Detail">
  <div id="cardDetail_ABC110-AD" class="content" style="display: block;">
    Product ABC110-AD Info
  </div>
  <div id="cardDetail_ABC110-BG" class="content" style="display: none;">
    Product ABC110-BG Info
  </div>
  <div id="cardDetail_ABC110-CE" class="content" style="display: none;">
    Product ABC110-CE Info
  </div>
</div>