禁用一个类的boostrap切换崩溃，并启用另一个类的崩溃 [英] Disable boostrap toggle collapse for one class and enable it for another

问题描述

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

I have a boostrap collapse button that looks like this:

<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和数据目标必须是数据库中图片的ID，否则将无法显示准确的信息. 但是，我还有一个喜欢"按钮，当用户单击它时，他将喜欢"该图片，并且它是这样的:

when user click this button, more information about the picture will be revealed. Because each picture has unique information, the div id and data-target of this button has to be the id of the picture in the database, otherwise no accurate information can be displayed. However, I also have a like button, when a user clicked it, he will "liked" the picture, and it goes like this :

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

喜欢"按钮的ID也必须与数据库中图片的ID相同，因为在javascript代码中，我使用此ID来了解正在点击哪张图片的喜欢"按钮，然后我可以添加数字该图片的喜欢人数.

the id of the like button also has to be identical to the id of the picture in the database, because in the javascript code I use this id to know which picture's like button is being clicked, and then I can add the number of likes for that picture.

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

The problem is, both the like button and the collapse button have the same id(the id of the picture). When I clicked the collapse button, instead of showing more information about the picture, the number of likes is being hidden. I tried to disabled boostrap collapse based on classes by the following code :

<script>

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

</script>

但是它不起作用.如果删除喜欢"按钮，一切都会顺利进行，但是添加喜欢"按钮后，折叠按钮在单击时会隐藏喜欢"按钮.我该怎么做才能避免折叠按钮干扰喜欢按钮?

but it's not working. If I delete the "like" button everything will work smoothly, but after adding the like button, the collapse button would hide the like button when it's clicked. What can I do to not the the collapse button interfere with the likes button?

推荐答案

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

So here is an example where you use the same id :

ABCD1234

ABCD1234

在两个元素上都使用

，但是在喜欢"按钮上将其用作数据属性.单击按钮后，您可以通过数据属性检索ID，然后将其用作选择器，以根据该ID更新相应的匹配折叠内容的点击计数.

on both elements but on the like button you apply it as a data attribute. When the button is clicked, you retrieve the id via the data attribute and then use it as a selector to update the like count on the appropriate matching collapsed content based on that 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切换崩溃，并启用另一个类的崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！