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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用通配符

1 个答案: