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

【问题标题】：JQuery clickable div to toggle content using WildcardJQuery 可点击 div 使用通配符切换内容
【发布时间】：2016-03-08 03:42:49
【问题描述】：

我正在尝试制作可点击的 DIV 组（“card_ABC110-”）来切换在“产品详细信息”区域中显示其各自的内容。 id 是根据其类别代码（即 ABC、BBC 等）在循环中生成的。所以当前以“card_ABC110-”开头的id group，接下来可能会变成“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>

谢谢！

【问题讨论】：

我的回答解决了你的问题吗？

标签： jquery html toggle wildcard clickable

【解决方案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>

【讨论】：