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，否则无法显示准确的信息。但是，我也有一个类似按钮，当用户点击它时，他会喜欢＆＃34;图片，它是这样的：

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

like按钮的id也必须与数据库中图片的id相同，因为在javascript代码中我使用这个id知道哪个图片像按钮一样被点击，然后我可以添加该图片的喜欢数量。

问题是，like按钮和折叠按钮都具有相同的id（图片的id）。当我单击折叠按钮时，不是显示有关图片的更多信息，而是隐藏了喜欢的数量。我尝试通过以下代码禁用基于类的boostrap崩溃：

<script>

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

</script>

但它没有用。如果我删除＆＃34;喜欢＆＃34;按钮一切都会顺利运行，但在添加like按钮后，折叠按钮会在点击时隐藏相似的按钮。如果没有折叠按钮干扰喜欢按钮，我该怎么办？

Answer 1

所以这是一个使用相同id的例子：

ABCD1234

在两个元素上，但在类似按钮上，您将其应用为数据属性。单击该按钮时，您将通过data属性检索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

禁用一个类的boostrap切换折叠并为另一个类启用它

1 个答案: