javascript - 为一个类禁用 Bootstrap 切换折叠并为另一个类启用它

Question

我有一个看起来像这样的 boostrap 折叠按钮:

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#<?php echo $row['pid']; ?>">View more info</button>
    <div id="<?php echo $row['pid']; ?>" class="collapse">
        <?php
        //php code that display more info goes here
        }
        echo '</div>';
  ?>

当用户单击此按钮时，将显示有关图片的更多信息。因为每张图片的信息都是唯一的，所以这个按钮的div id和data-target必须是图片在数据库中的id，否则无法显示准确的信息。不过，我也有一个点赞按钮，当用户点击它时，他会对图片“点赞”，它是这样的:

<button type="button" class="like" id="<?php echo $row['pid']; ?>">Like <span><?php echo likes($row['pid']); ?></span></button>

点赞按钮的id也必须与数据库中图片的id相同，因为在javascript代码中我使用这个id来知道点击了哪个图片的点赞按钮，然后我可以添加数字喜欢那张照片的人。

问题是，点赞按钮和折叠按钮都有相同的id(图片的id)。当我单击折叠按钮时，没有显示有关图片的更多信息，而是隐藏了喜欢的数量。我尝试通过以下代码禁用基于类的 boostrap 折叠:

<script>

    $('.like').bootstrapToggle('off');
   $('.collapse').bootstrapToggle('on');

</script>

但它不起作用。如果我删除“喜欢”按钮，一切都会顺利进行，但在添加喜欢按钮后，折叠按钮会在单击时隐藏喜欢按钮。我该怎么做才能不让折叠按钮干扰喜欢的按钮？

Answer 1

所以这是一个使用相同 id 的示例:

ABCD1234

在两个元素上，但在点赞按钮上，您将其作为数据属性应用。单击该按钮时，您将通过数据属性检索 ID，然后将其用作选择器以根据该 ID 更新适当匹配的折叠内容的点赞数。

HTML

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ABCD1234" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="ABCD1234">
  <div class="well">
    <span>100</span> likes
  </div>
</div>

<br>
<button type="button" class="like" data-id="ABCD1234">Like <span>ABCD1234</span></button>

JS

$('.like').click(function(){
  var thisID = '#' + $(this).data('id');
  var $count = $('span', thisID);
  var number = parseInt($count.text());
  $count.text(number+1);
});

https://codepen.io/partypete25/pen/XgqBZX