javascript - 更改列表后更改班级
问题描述
我有一个双重列表，其中数据正在ul li从 JSON 文件打印模式。您可以将任何移动li到任何侧列表。我被困在一个点上。
我想启用<p>标签内容仅<li>在右列表中获取display: block而不是左列表侧的属性<li>。我尝试了不同的 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/popper.js@1.16.0/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>解决方案
添加 CSS 并从 JS 中的 p 标签中移除内联样式显示 none。
$('.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>推荐阅读
- php - Laravel Hash::check() 使用不同的盐和前缀
- c++ - 在 C++ 中为错误处理声明局部方法变量是否会带来内存或性能成本？
- apache-spark - Pyspark - 希望创建双列的规范化版本
- apache-kafka - 如何在 kafka 控制台生产者中添加键序列化器和值序列化器
- node.js - Github Actions 部署 docker 打包 | 错误：未找到：python
- python - 删除数据框中的“Specials Unicode”
- python - Python 代码可以包含在 NetLogo 代码的主体中吗？
- npm - 当我尝试使用静态服务器在移动设备上进行测试时，为什么无法连接到我的 WSL 控制台提供的 IP
- r - 使用 R 的页面中的多个绘图
- jquery - 当折叠元素已经显示时，Bootstrap 4展开全部/全部折叠按钮不起作用