各製品の情報を切り替えます

Question

私はOpenCart v2.2.0を使用しています。カテゴリページには、カテゴリに属する​​各製品の「表示/非表示」リンクがあり、製品情報を表示または非表示にすることになっています。問題は、クリックしたShow/Hideリンクに関係なく、最初の製品情報のみを切り替えることです。他の人は自分の情報を切り替えることはありません、彼らはすべて最初のものだけを切り替える。これまでのところ、私はこのコードを持っている：category.tplで

：

<div class="caption"> 

    <h4><a style="width:140%;" href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4> 
    <a href="javascript:toggleDiv('myContent');" style="padding: 5px 10px;">Show/Hide</a> 
    <div id="myContent" style="display:none;"> 
     <p class="description"><b>About:</b>&nbsp;<?php echo $product['description']; ?></p> 
      <?php if ($product['manufacturer']) { ?> 
      <b><?php echo "<strong>Manufacturer:</strong>" ?></b> <a href="<?php echo $product['manufacturers']?>"><span itemprop="brand"><?php echo $product['manufacturer']; ?></span></a> 
      <?php } ?></br> 
    <?php echo "<strong>For models:</strong>&nbsp;&nbsp;" . $product['model']; ?></br> 
      <?php echo "<strong>Manufacturer code:</strong>&nbsp;&nbsp;" . $product['mpn']; ?></br> 
    </div>    
</div> 

もあります：誰もが他の人が同様に自分の情報を切り替えるI作るのですか

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
function toggleDiv(divId) { 
    $("#"+divId).toggle(); 
} 
</script> 

知っていますか？私は、これは明らかに不運で解決しようとしてきました。これは私が思いついたすべてですが、それは良くありません。

Answer 1

あなたの答えは便利でしたが、私の解決策は、PRODUCT_IDと私は表示/非表示]リンクをクリックしたときに、すべてのdiv要素を個別に切り替えるだろうと道を渡すことでした。だから、コードは私が実際にproduct_idを渡す2行を除いて私のオリジナルと同じです：

<a href="javascript:toggleDiv('myContent<?php echo $product['product_id']; ?>');" style="padding: 5px 10px;">Show/Hide</a> 
<div id="myContent<?php echo $product['product_id']; ?>" style="display:none;"> 

Answer 2

HTMLの識別子はuniuqeでなければなりません。共通クラスを使用して要素をターゲットにすることができます。 jQuery .on()メソッドを使用して、邪魔にならないイベントハンドラとイベントをバインドすることをお勧めします。

さまざまな方法を使用してDOMをトラバースできます。

$(function(){ 
    $('.toggleDiv').on('click', function(e){ 
     e.preventDefault(); 
     $(this) //Current element 
      .closest('.caption') //Travese up to get common parent 
      .find('.myContent') //Get Element using class 
      .toggle(); 
    }) 
}); 

HTML、ここではコンテンツのdivに要素とmyContentを固定するtoggleDivを追加

<div class="caption"> 
    <h4><a style="width:140%;" href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4> 
    <a href="javascript:void(0);" class='toggleDiv' style="padding: 5px 10px;">Show/Hide</a> 
    <div class="myContent" style="display:none;"> 
     <p class="description"><b>About:</b>&nbsp;<?php echo $product['description']; ?></p> 
     <?php if ($product['manufacturer']) { ?> 
     <b><?php echo "<strong>Manufacturer:</strong>" ?></b> <a href="<?php echo $product['manufacturers']?>"><span itemprop="brand"><?php echo $product['manufacturer']; ?></span></a> 
     <?php } ?></br> 
     <?php echo "<strong>For models:</strong>&nbsp;&nbsp;" . $product['model']; ?></br> 
     <?php echo "<strong>Manufacturer code:</strong>&nbsp;&nbsp;" . $product['mpn']; ?></br> 
    </div>    
</div> 

Answer 3

まずidのでそれらを使用する一般的なクラスで重複するものを置き換え、同じ文書内で一意である必要がありますクラスを選択するには、例のアンカーaに私の例のtoggleのようなクラスをつけ、クリックイベントをクラスに添付してください：

$('body').on('click','.toggle',function(e){ 
    e.preventDefault(); 

    $(this).closest('.caption').find('.myContent').toggle(); 
    //Or 
    $(this).next('.myContent').toggle(); 
}) 

ここでは、インラインイベントonclickの使用を避け、javascriptコードのclickイベントを添付することをお勧めします。

これが役に立ちます。

$('body').on('click','.toggle',function(e){ 
 
    e.preventDefault(); 
 
    
 
    $(this).closest('.caption').find('.myContent').toggle(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="caption"> 
 
    <h4> <a style="width:140%;" href="">Name1</a></h4> 
 
    <a href="" style="padding: 5px 10px;" class='toggle'>Show/Hide</a> 
 
    <div class="myContent" style="display:none;"> 
 
    <p class="description"><b>About:</b>&nbsp;description1</p> 
 
    <b><strong>Manufacturer:</strong></b> 
 
    <a href=""> 
 
     <span itemprop="brand">manufacturer</span> 
 
    </a> 
 
    <br> 
 
    <strong>For models:</strong>&nbsp;&nbsp;Manufacturer code:&nbsp;&nbsp; 
 
    </div> 
 
</div> 
 

 
<div class="caption"> 
 
    <h4><a style="width:140%;" href="">Name2</a></h4> 
 
    <a href="" style="padding: 5px 10px;" class='toggle'>Show/Hide</a> 
 
    <div class="myContent" style="display:none;"> 
 
    <p class="description"><b>About:</b>&nbsp;description2</p> 
 
    <b><strong>Manufacturer:</strong></b> 
 
    <a href=""> 
 
     <span itemprop="brand">manufacturer</span> 
 
    </a> 
 
    <br> 
 
    <strong>For models:</strong>&nbsp;&nbsp;Manufacturer code:&nbsp;&nbsp; 
 
    </div> 
 
</div>