JQuery可點擊div使用通配符切換內容

我想讓可點擊DIV組（「card_ABC110- 」）切換顯示其在「產品 - 詳細信息」區域中的相應內容。該id根據其類別代碼（即ABC，BBC等）在循環中生成。因此，以「card_ABC110-」開頭的當前id組可能會變成「card_BBC221- *」。JQuery可點擊div使用通配符切換內容

爲了得到切換的確切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>

謝謝！

來源

2016-03-08 KooKoo Lic

難道我的回答解決問題了嗎？ –

$("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>

來源

2016-03-08 04:10:59

謝謝你展示的代碼，它的效果很好！ –

JQuery可點擊div使用通配符切換內容

回答

相關問題