切换每个产品的信息

Question

我正在使用 OpenCart v2.2.0。在类别页面上，属于该类别的每个产品都有 Show/Hide link，这应该是缩短或隐藏产品信息。问题是它只切换第一个产品信息，无论我点击哪个 Show/Hide link。其他人不切换他们的信息，他们都只切换第一个。到目前为止我有这个代码：

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

还有：

    <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

HTML中的标识符必须是唯一的。您可以使用通用class来定位元素。我会建议你使用 unobstrsive 事件处理程序并使用 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，这里添加了 toggleDiv 到锚元素和 myContent 到内容 div

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

首先，id 在同一个文档中应该是唯一的，所以用一般的 class 替换重复的 class 然后使用那些 class 进行选择，例如给你的锚 a a class like toggle in my example 然后将点击事件附加到 class :

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

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

我在这里建议避免使用内联事件 onclick 并从您的 javascript 代码附加点击事件。

希望这对您有所帮助。

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

Answer 3

您的回答很有帮助，但我的解决方案是传递 product_id，这样当我单击 Show/Hide link 时，每个 div 都会单独切换。所以，代码和我原来的一样，除了这两行我实际上通过 product_id:

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

切换每个产品的信息

Toggle info for each product

javascript

jquery

toggle