javascript - 根据逗号分隔字符串中的值附加 HTML

Question

我目前正在尝试根据存储在 MD 数组中的逗号分隔字符串中的值来确定要将哪些 HTML 附加到为用户生成的网页。

我需要能够检查每个值的逗号分隔字符串并根据这些值附加 HTML。

目前我使用单个值，但如果有多个值....那么我如何遍历每个 EG“html1，html2”我希望能够识别 html 1 和 html 2 是否因此生成链接等。

下面是一个 JS fiddle 和我目前拥有的示例，如果需要，只需更改测试 1 值以与数组中的值匹配。

jQuery(function($) {
  var $htmlele = $('.side-contain');
  var data = [
    ["test1", "user", "yes", "html1,html2"],
    ["test2", "admin", "yes", "html1"],
    ["test3", "user", "no", "html2"],
    ["test4", "user", "no", "html1,html2,html3,test"]
  ]

  function append_ele() {
    var userval = $('#user').text();
    var userstr = userval.substring(0, userval.indexOf(" "));
    for (var i = 0; i < data.length; i++) {
      if (data[i][0] === userstr && data[i][3] === "html1") {
        $htmlele.append('<a href="https://html1.test" class="list-group-item btn">HTML 1</a>');
      } else if (data[i][0] === userstr && data[i][3] === "html2") {
        $htmlele.append('<a href="https://html2.test" class="list-group-item btn">HTML 2</a>');
      } else if (data[i][0] === userstr && data[i][3] === "html3") {
        $htmlele.append('<a href="https://html3.test" class="list-group-item btn">HTML 3</a>');
      }
    }
  }

  $(document).ready(function() {
    $('[data-toggle=offcanvas]').click(function() {
      if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
        $('.list-group-item').attr('tabindex', '-1');
      } else {
        $('.list-group-item').attr('tabindex', '');
      }
      $('.row-offcanvas').toggleClass('active');
    });
  });
  append_ele();
});

body {
  padding-top: 50px;
}

html,
body {
  overflow-x: hidden;
  /* Prevent scroll on narrow devices */
  height: 100%;
}

body {
  padding-top: 70px;
}

footer {
  padding: 30px 0;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  background-color: transparent;
  color: #999999;
}

.head {
  background: #668B8B;
  color: #000000;
}

.side-contain {
  margin-top: 5px;
  border: 2px solid #668B8B;
  border-radius: 10px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas-right {
    right: 20%;
  }
  .row-offcanvas-left {
    left: 20%;
  }
  .row-offcanvas-right .sidebar-offcanvas {
    right: -20%;
    /* 3 columns */
    background-color: rgb(255, 255, 255);
  }
  .row-offcanvas-left .sidebar-offcanvas {
    left: -20%;
    /* 3 columns */
    background-color: rgb(255, 255, 255);
  }
  .row-offcanvas-right.active {
    right: 0;
    /* 3 columns */
  }
  .row-offcanvas-left.active {
    left: 0;
    /* 3 columns */
  }
  .row-offcanvas-right.active .sidebar-offcanvas {
    background-color: rgb(254, 254, 254);
  }
  .row-offcanvas-left.active .sidebar-offcanvas {
    background-color: rgb(254, 254, 254);
  }
  .row-offcanvas .content {
    width: 80%;
    /* 9 columns */
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas.active .content {
    width: 100%;
    /* 12 columns */
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 20%;
    /* 3 columns */
  }
}

@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas-right {
    right: 0;
  }
  .row-offcanvas-left {
    left: 0;
  }
  .row-offcanvas-right .sidebar-offcanvas {
    right: -50%;
    /* 6 columns */
  }
  .row-offcanvas-left .sidebar-offcanvas {
    left: -50%;
    /* 6 columns */
  }
  .row-offcanvas-right.active {
    right: 50%;
    /* 6 columns */
  }
  .row-offcanvas-left.active {
    left: 50%;
    /* 6 columns */
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;
    /* 6 columns */
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>Byphone Auth</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">Test Application</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form action="/logout" class="navbar-form navbar-right">
            <button class="btn btn-success" type="submit" id="user" onsubmit="return false">test2 | Log Out </button>
          </form>
        </div>
      </div>
    </nav>
    <div class="container-fluid">
      <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
      <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar" role="navigation">
          <div class="side-contain">
            <div class="panel-heading head" role="tab" id="headingOne">
              <h2 class="panel-title">My Account</h2>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-10 content">
          <div>
            <h1 class="main-head">User</h1>
            <p class="lead">Placeholder
          </div>
        </div>
      </div>
    </div>
    <hr>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  </body>
</html>

这里是 JsFiddle

Answer 1

这是你需要做的改变您可以在 for 循环中再添加一个条件，以确定您是否有不止一个 html，在这种情况下，您可以制作可用 html 的数组，遍历该 html 并将您的逻辑放在那里追加

 for (var i = 0; i < data.length; i++) {

 if (data[i][0] === userstr && data[i][3] === "html1") {
 $htmlele.append('<a href="https://html1.test" class="list-group-item    btn">HTML 1</a>');
  } 

  else if (data[i][0] === userstr && data[i][3] === "html2") {
  $htmlele.append('<a href="https://html2.test" class="list-group-item btn">HTML 2</a>');
  } 
   else if (data[i][0] === userstr && data[i][3] === "html3") {
   $htmlele.append('<a href="https://html3.test" class="list-group-item btn">HTML 3</a>');
  }
   else if(data[i][0] === userstr && data[i][3].length >= 7){
  //this is the new block you can add 
  //data[i][3].length >=7 this condition is enough to identify you have more then one html
  var newArr =data[i][3]x.split(",")//get the array of new html
  for(var j =0;j<=newArr.length;j++){
  // iterate through new array of html
  //write you logic heree
  }

  }
}