Question

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

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

目前我让它使用单个值但是如果有多个值......我怎么然后通过每个EG＆＃34; html1，html2＆＃34;我希望能够识别出html 1＆amp;因此html 2会生成链接等。

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

＆＃13;

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();
});

＆＃13;

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 */
  }
}

＆＃13;

<!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>

＆＃13;

这是JsFiddle

Answer 1

这是您需要做出的改变你可以在你的循环中再添加一个条件，以确定你是否有多个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
  }

  }
}

基于逗号分隔字符串中的值附加HTML

1 个答案: