コンマで区切られた文字列の値に基づいてHTMLを追加します。

Question

現在、ユーザーに生成されるWebページにどの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>

そしてここで、ここでJsFiddle

Answer 1

であるあなたは、あなたが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 
    } 

    } 
}