如何解决如何更新 csv 文件以记录使用 toggleClass jQuery 函数实现的用户选择图像?
我制作了一个图像页面,用户可以使用 jQuery 通过 click 和 toggleClass 函数选择这些图像。如何更新 csv 文件以记录用户选择了哪些图像?我用来使图像可选的脚本如下所示。
<script>
$('img').click(function(){
$(this).toggleClass('selected');
});
</script>
解决方法
这是一个非常基本的实现,可以帮助您入门。请注意,此页面中的堆栈片段环境禁用了下载,但下面还有一个 jsfiddle 链接,您也可以在其中使用相同的代码测试下载
为了 d
$('img').click(function () {
$(this).toggleClass('selected');
});
$('#create-csv').click(function () {
const rows = $('img').map(function () {
return [this.id,+$(this).hasClass('selected')].join();
}).get();
console.log(rows.join('\n'));
dloadCSV(rows)
});
function dloadCSV(rows) {
let csvContent = 'data:text/csv;charset=utf-8,' + rows.join('\n');
var encodedUri = encodeURI(csvContent);
var link = document.createElement('a');
link.setAttribute('href',encodedUri);
link.setAttribute('download','my_data.csv');
document.body.appendChild(link); // Required for FF
link.click();
link.remove();
}
.selected{border:2px solid red;display:inline-block; width:150px; height:100px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section><button id="create-csv">Create csv</button><br/><br/></section>
<img src="https://via.placeholder.com/140x100" alt="" id="img1">
<img src="https://via.placeholder.com/140x100" alt="" id="img2">
<img src="https://via.placeholder.com/140x100" alt="" id="img3">
<img src="https://via.placeholder.com/140x100" alt="" id="img4">
<img src="https://via.placeholder.com/140x100" alt="" id="img5">
Fiddle demo 测试下载
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。