javascript - 更改清单后更改班级(Change class after changing list)

Question

I have a dual list in which data is printing a ul li pattern from a JSON file.

(我有一个双重列表，其中数据正在从JSON文件中打印ul li模式。)

You can move any li to any side list.

(您可以将任何li移到任何侧边列表。)

I am stuck at a point.

(我陷入了困境。)

I want to enable a property that the <p> tag content only in <li> in right-list gets display: block and not the left-list side <li> .

(我想启用一个属性，使仅右列表中<li>中的<p>标记内容display: block而不是左列表中的<li> 。)

I have tried different JS code but they didn't work for me .

(我尝试了不同的JS代码，但它们对我没有用。)

 $('.content').hide(); $('.listelement').on('click', function() { if (!($(this).children('.content').is(':visible'))) { $('.content').slideUp(); $(this).children('.content').slideDown(); } else { $('.content').slideUp(); } }); $(function() { $('body').on('click', '.show', function() { css("display", "block"); }); $('body').on('click', '.list-group .list-group-item', function() { $(this).toggleClass('active'); }); $('.listarrows button').click(function() { var $button = $(this), actives = ''; if ($button.hasClass('move-left')) { actives = $('.list-right ul li.active'); actives.clone().appendTo('.list-left ul'); actives.remove(); } else if ($button.hasClass('move-right')) { actives = $('.list-left ul li.active'); actives.clone().appendTo('.list-right ul'); actives.remove(); } }); $('[name="SearchDualList"]').keyup(function(e) { var code = e.keyCode || e.which; if (code == '9') return; if (code == '27') $(this).val(null); var $rows = $(this).closest('.dual-list').find('.list-group li'); var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); }); $(function() { var ctList = []; var ctRight = []; var $tBody = $("#La"); var $rbody = $("#accordian"); $.getJSON('https://api.myjson.com/bins/d6n2a', function(data) { data.topic_info.qt_ct_connection.map(value => { value.ct_list.forEach(CTLIST => { $tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p style="display: none" class="show"> <a href="#demo_${CTLIST.ct}" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a> <div id="demo_${CTLIST.ct}" class="collapse"> ${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry} </div> </p> </li>`); }); }) }) }) 

 .ctList { padding-top: 20px; } .ctList .dual-list .list-group { margin-top: 8px; } .ctList .list-left li, .list-right li { cursor: pointer; } .ctList .list-arrows { padding-top: 100px; } .ctList .list-arrows button { margin-bottom: 20px; } 

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="ctList"> <div class="container"> <div class="row"> <div class="dual-list list-left col-md-5"> <div class="well text-right"> <div class="row"> <div class="col-md-10"> <div class="input-group"> <span class="input-group-addon glyphicon glyphicon-search"> <i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i> </span> <input type="text" name="SearchDualList" class="form-control" placeholder="search" /> </div> </div> <div class="col-md-2"> <div class="btn-group"> <a class="btn btn-default selector" title="select all"> <i class="glyphicon glyphicon-unchecked"></i> </a> </div> </div> </div> <ul class="list-group" id="La"></ul> </div> </div> <div class="list-arrows col-md-1 text-center"> <button class="btn btn-default btn-sm move-left"> <span class="glyphicon glyphicon-chevron-left"> <i class="fa fa-arrow-left" aria-hidden="true"></i> </span> </button> <button class="btn btn-default btn-sm move-right"> <span class="glyphicon glyphicon-chevron-right"> <i class="fa fa-arrow-right" aria-hidden="true"></i> </span> </button> </div> <div class="dual-list list-right col-md-5"> <div class="well"> <div class="row"> <div class="col-md-2"> <div class="btn-group"> <a class="btn btn-default selector" title="select all"> <i class="glyphicon glyphicon-unchecked"></i> </a> </div> </div> <div class="col-md-10"> <div class="input-group"> <input type="text" name="SearchDualList" class="form-control" placeholder="search" /> <span class="input-group-addon glyphicon glyphicon-search"></span> </div> </div> </div> <form> <ul class="list-group" id="accordian"> <!-- right list --> </ul> <input type="submit" value="submit" name="submit"> </form> </div> </div> </div> </div> </section> 

  ask by Ritik Singh translate from so

Answer 1

Add CSS and remove inline style display none from p tag in JS.

(添加CSS并从JS中的p标记中删除内联样式显示内容。)

 $('.content').hide(); $('.listelement').on('click', function() { if (!($(this).children('.content').is(':visible'))) { $('.content').slideUp(); $(this).children('.content').slideDown(); } else { $('.content').slideUp(); } }); $(function() { $('body').on('click', '.show', function() { css("display", "block"); }); $('body').on('click', '.list-group .list-group-item', function() { $(this).toggleClass('active'); }); $('.listarrows button').click(function() { var $button = $(this), actives = ''; if ($button.hasClass('move-left')) { actives = $('.list-right ul li.active'); actives.clone().appendTo('.list-left ul'); actives.remove(); } else if ($button.hasClass('move-right')) { actives = $('.list-left ul li.active'); actives.clone().appendTo('.list-right ul'); actives.remove(); } }); $('[name="SearchDualList"]').keyup(function(e) { var code = e.keyCode || e.which; if (code == '9') return; if (code == '27') $(this).val(null); var $rows = $(this).closest('.dual-list').find('.list-group li'); var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); }); $(function() { var ctList = []; var ctRight = []; var $tBody = $("#La"); var $rbody = $("#accordian"); $.getJSON('https://api.myjson.com/bins/d6n2a', function(data) { data.topic_info.qt_ct_connection.map(value => { value.ct_list.forEach(CTLIST => { $tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p> <a href="#demo_${CTLIST.ct}" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a> <div id="demo_${CTLIST.ct}" class="collapse"> ${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry} </div> </p> </li>`); }); }) }) }) 

 .ctList { padding-top: 20px; } .ctList .dual-list .list-group { margin-top: 8px; } .ctList .list-left li, .list-right li { cursor: pointer; } .ctList .list-arrows { padding-top: 100px; } .ctList .list-arrows button { margin-bottom: 20px; } /********************************/ /********************************/ /********************************/ /* ADD THIS */ .dual-list.list-left .well li.list-group-item p { display: none; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="ctList"> <div class="container"> <div class="row"> <div class="dual-list list-left col-6"> <div class="well text-right"> <div class="row"> <div class="col-md-10"> <div class="input-group"> <span class="input-group-addon glyphicon glyphicon-search"> <i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i> </span> <input type="text" name="SearchDualList" class="form-control" placeholder="search" /> </div> </div> <div class="col-md-2"> <div class="btn-group"> <a class="btn btn-default selector" title="select all"> <i class="glyphicon glyphicon-unchecked"></i> </a> </div> </div> </div> <ul class="list-group" id="La"></ul> </div> </div> <div class="dual-list list-right col-6"> <div class="well"> <div class="row"> <div class="col-md-2"> <div class="btn-group"> <a class="btn btn-default selector" title="select all"> <i class="glyphicon glyphicon-unchecked"></i> </a> </div> </div> <div class="col-md-10"> <div class="input-group"> <input type="text" name="SearchDualList" class="form-control" placeholder="search" /> <span class="input-group-addon glyphicon glyphicon-search"></span> </div> </div> </div> <ul class="list-group" id="La"> <li class="list-group-item" id="rl">point_in_first_quad <p> <a href="#demo_point_in_first_quad" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a> </p> <div id="demo_point_in_first_quad" class="collapse"> 10, capable, true, true </div> <p></p> </li> <li class="list-group-item" id="rl">point_in_second_quad <p> <a href="#demo_point_in_second_quad" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a> </p> <div id="demo_point_in_second_quad" class="collapse"> 10, capable, true, true </div> <p></p> </li> <li class="list-group-item" id="rl">trapezium_draw_slope_area_equ <p> <a href="#demo_trapezium_draw_slope_area_equ" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a> </p> <div id="demo_trapezium_draw_slope_area_equ" class="collapse"> 20, strong, true, true </div> <p></p> </li> </ul> <form> <ul class="list-group" id="accordian"> <!-- right list --> </ul> <input type="submit" value="submit" name="submit"> </form> </div> </div> </div> </div> </section>