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

Question

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

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

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

下面是一个JS小提琴和我目前所拥有的示例，只需更改test 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

这是您需要进行的更改，您可以在循环中添加一个条件，以标识是否有一个以上的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
  }

  }
}