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

Question

我正在尝试制作一组可点击的 DIV ("card_ABC110-") 以在 "product-Detail" 区域切换显示其各自的内容。 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>

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

JQuery clickable div to toggle content using Wildcard

html

jquery

wildcard

toggle

clickable