Question

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

在category.tpl中：

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

还有：

$('#videoAbout')[0].play();

有谁知道如何让其他人切换自己的信息？显然，我一直试图解决这个问题，没有运气。这就是我想出来的，但它并不好。

Answer 1

HTML中的标识符必须是uniuqe。您可以使用公共类来定位元素。我建议你使用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在同一个文档中应该是唯一的，所以用普通类替换重复的那些，然后使用这些类进行选择，例如给你的锚点a一个像toggle这样的类在我的示例中，然后将click事件附加到类：

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

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

我建议您在此处避免使用内联事件onclick并附加您的javascript代码中的click事件。

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您的回答很有帮助，但我的解决方案是传递product_id，这样当我点击显示/隐藏链接时，每个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;">

切换每个产品的信息

3 个答案: