쉼표로 구분 된 문자열을 사용하여 HTML을 추가하십시오.

Question

현재 사용자가 생성 한 웹 페이지에 어떤 HTML 값을 추가할지 결정하려고합니다. MD 배열.

각 값에 대해 쉼표로 구분 된 문자열을 확인하고 값에 따라 HTML을 추가 할 수 있어야합니다.

현재로서는 하나의 값으로 작업하지만 하나 이상의 값이있는 경우 .... 어떻게 각 EG "html1, html2"를 통과해야 하나? html 1을 식별 할 수 있기를 원합니다. & html 2 따라서 거기에 링크 등을 생성합니다.

다음은 내가 지금 가지고있는 JS 피들 및 예입니다. 필요한 경우 테스트 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>

는 을 내리는 데 필요한 변화를 식별하기 위해 루프 당신을 한 번 더 조건을 둘 수있다 HTML 여기에 JsFiddle

Answer 1

입니다 이 경우 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 
    } 

    } 
}