javascript - 如何在 Bootstrap 中构建交互式决策树-6ren

javascript - 如何在 Bootstrap 中构建交互式决策树

转载作者：行者123 更新时间：2023-11-28 05:11:23

24

4

第一个堆栈溢出问题。提前致谢。

我正在尝试构建一个 Bootstrap 站点，供用户根据先前的决定得出答案。本质上，它是一个交互式决策树。

目前我在做什么(如果有更简单的做事方式，我愿意接受建议)

我正在使用 Bootstrap 的导航丸让用户选择他们的选择。 nav-pills 打开其他 nav-pills 等等，直到用户到达树的末端并得到答案。我遇到的问题是，当用户回到第一个决定并遵循不同的路径时，最终的“tabpanel”答案不会隐藏。

我在下面包含了代码。要重新创建我遇到的问题，请单击“1stYes”，然后单击“2ndYesFrom1stYes”，然后单击“2ndNoFrom1stYes”。如您所见，之前的答案仍然出现。

<head>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div>
      <h2 class="text-center">User Decision Tree</h2>
      <br>
      <!-- First decision -->
      <ul class="nav nav-pills nav-justified">
        <h3 class="text-center">1st decision</h3>
        <br>
        <li role="presentation" class=""><a href="#2ndDecisionYesFrom1st" aria-controls="2ndYes" role="tab" data-toggle="tab">1stYes</a>
        </li>
        <li role="presentation"><a href="#2ndDecisionNoFrom1st" aria-controls="2ndNo" role="tab" data-toggle="tab">1stNo</a>
        </li>
      </ul>
      <br>
      <!-- Second decision -->
      <div class="tab-content">
        <br>
        <div role="tabpanel" class="tab-pane" id="2ndDecisionYesFrom1st">
          <h3 class="text-center">2nd Decision After Yes From First Decision</h3>
          <br>
          <ul class="nav nav-pills nav-justified" role="tablist">
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#AnswerAfterYesFrom2ndYesFrom1st" role="tab">2ndYesFrom1stYes</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#AnswerAfterNoFrom2ndYesFrom1st" role="tab">2ndNoFrom1stYes</a>
            </li>
          </ul>
        </div>
        <div role="tabpanel" class="tab-pane" id="2ndDecisionNoFrom1st">
          <h3 class="text-center">2nd Decision After No From First Decision</h3>
          <br>
          <ul class="nav nav-pills nav-justified" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#AnswerAfterYesFrom2ndNoFrom1st" role="tab">2ndYesFrom1stNo</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#AnswerAfterNoFrom2ndNoFrom1st" role="tab">2ndNoFrom1stNo</a>
            </li>
          </ul>
        </div>
      </div>
      <br>
      <!-- Answers -->
      <div class="tab-content">
        <br>
        <div role="tabpanel" class="tab-pane" id="AnswerAfterYesFrom2ndYesFrom1st">
          <h3 class="text-center">Answer after 2nd Decision Yes and 1st Decision Yes</h3>
          <br>
          <h4 class="text-center"><i>Here is the answer after 2nd Decision Yes and 1st Decision Yes</i></h4>
        </div>
      </div>
      <div class="tab-content">
        <br>
        <div role="tabpanel" class="tab-pane" id="AnswerAfterNoFrom2ndYesFrom1st">
          <h3 class="text-center">Answer after 2nd Decision No and 1st Decision Yes</h3>
          <br>
          <h4 class="text-center"><i>Here is the answer after 2nd Decision No and 1st Decision Yes</i></h4>
        </div>
      </div>
      <div class="tab-content">
        <br>
        <div role="tabpanel" class="tab-pane" id="AnswerAfterYesFrom2ndNoFrom1st">
          <h3 class="text-center">Answer after 2nd Decision Yes and 1st Decision No</h3>
          <br>
          <h4 class="text-center"><i>Here is the answer after 2nd Decision Yes and 1st Decision Yes</i></h4>
        </div>
      </div>
      <div class="tab-content">
        <br>
        <div role="tabpanel" class="tab-pane" id="AnswerAfterNoFrom2ndNoFrom1st">
          <h3 class="text-center">Answer after 2nd Decision No and 1st Decision No</h3>
          <br>
          <h4 class="text-center"><i>Here is the answer after 2nd Decision No and 1st Decision Yes</i></h4>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container -->
</body>

最佳答案

您可以为不同级别添加一个名为“级别”的属性。

<div role="tabpanel" class="tab-pane" level="1">

然后添加一些js来关闭更高级别的标签。 (打开的选项卡获得“事件”类。删除它会关闭它。)

$('a[role=tab]').on('click', function (e) {
    var clickLevel = Number($(e.target).parent('li').attr('level'));
    $('div.tab-pane.active').each(function () {
        if (Number($(this).attr('level')) > clickLevel) {
            $(this).removeClass('active');
        });
});

编辑:我使选择器 $('a[role=tab]') 更具体。

关于javascript - 如何在 Bootstrap 中构建交互式决策树，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39530422/

24

4

0

文章推荐： html - CSS : button overlapped by a div, z-index 不工作

文章推荐： CSS下拉导航栏内的jquery移动按钮

文章推荐： angularjs - 模糊除选定项之外的所有列表项

文章推荐： html - Bootstrap 模态无法正确呈现表单元素

testing - 决策/条件覆盖
是否有显示测试用例数量以提供决策/条件覆盖率的工具？例如: if(x>0) if(x0) 3 个案例足以覆盖决策/条件。 if(x>0) if(x0) 4 个案例足以覆盖决策/条件。这是真的吗？
c++ - 决策、复杂条件和规划易于维护
我正在尝试找到一种优雅的方式来实现易于维护的决策算法，因为决策的条件可能经常变化。我将尝试更具体地举一个例子: 假设我正在尝试管理一家餐厅厨房的 cooking 厨师团队。每个厨师都知道如何 co
android - 决策 : ListView or ScrollView
我需要一个 Android Activity ，它应该显示一个字段，如带有图像的标题和其下方的几个动态生成的项目(我认为是 1 到 100)。如果我不想让 headsection 滚动，我会使用 Li
algorithm - 最大值(value)决策
我正在编写函数以从值列表中提供最大值(value)。我的问题是如果所有值都相同怎么办？例如， 30,29,34,45 简单。最大值为 45。现在， 20,20,20,20 这里的最大值是20吗？或者没
json - Postgres 决策、JSON 或额外的列？
我需要知道哪个检索事件日志的速度更快，但我在比较中找不到:假设需要查找的所有列都有btree索引，需要查找的json对象中的所有键都有GIN索引。 case 1: ActivityID (in
ios - Swift 自定义单元格布局 TableView 决策
我需要在我的 iPhone 应用程序中显示一个表格: neither the number of cells nor the contents are known at compile time, b
mysql - 数据库中的数据太多 - 需要做出 "replication"决策
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
c++ - 物理引擎的继承/接口(interface)决策
这是针对在 MinGW/Windows 上使用 SDL 的小型游戏项目。我正在研究一个物理引擎，我的想法是拥有一个Physics::Object，所有物理对象都应该派生自它，并且它会在全局 Phys
c# - LINQ 查询中的 If Else 决策
我有一个小的 LINQ 查询来填充下拉控件(WinForms Telerik 应用程序)，其中的数据行显示两个值(ITNBR 和描述): var query = from i in db.ItemMa
java - 由于递归规则调用，ANTLR3 错误规则具有非 LL(*) 决策
我正在尝试使用 antlr 3 为我的语法生成词法分析器和解析器。有人可以解释这个错误是什么意思吗？ error(211): T.g:14:6: [fatal] rule stmt has non-L
r - 更改 R 方图中的标签位置(决策/回归树)
partykit包很好地表示了决策树。我遇到的唯一问题是标签很长然后它们重叠。是否可以移动这些标签以防止它(见下图中的蓝色箭头)？ library("rpart") library("partykit
c# - _Layout.cshtml 上的 MVC 决策
所以我环顾四周，似乎找不到合适的解决方案来解决我的问题。问题在我的布局中，我希望能够根据数据库中的内容选择在运行时是否存在导航项: 当前布局(导航栏) @Html.Acti
python - 在 jupyter notebook 中显示 scikit 决策 TreeMap
我目前正在创建一个机器学习 jupyter 笔记本作为一个小项目，并希望显示我的决策树。但是，我能找到的所有选项都是导出图形然后加载图片，这相当复杂。所以想问问有没有办法不用导出加载图形，直接显示我
ANTLR:由于可从 alts 1,2 访问递归规则调用，因此规则 token 具有非 LL(*) 决策
grammar AdifyMapReducePredicate; PREDICATE : PREDICATE_BRANCH | EXPRESSION ; PREDICA

首页

博学

6Ren·AI

商城

javascript - 如何在 Bootstrap 中构建交互式决策树