如何简化一周中每天的jquery查找和attr更改
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何简化一周中每天的jquery查找和attr更改相关的知识，希望对你有一定的参考价值。
我不经常使用js / jquery，并且已经获得了这段非常好的代码来获得我想要的输出。
这需要从bulma中正确显示复选框，因为它们不显示，除非复选框ID与label相同，并且由于克隆而必须是唯一ID。标签字段也必须遵循相应的复选框输入，否则它不会显示，并且只有第一个复选框实例才会出现错误。
有人可以帮助简化以下内容：
<script>
$(document).ready(function(){
var c=1;
$("a#ap").click(function(){
$("product.clone").clone(false).find("#Monday, label[for='Monday'] ").val("").attr({'id' : 'Monday_'+(c), 'for' : 'Monday_'+(c)} ).end().removeClass('clone').appendTo("#additional_products")
.find("#Tuesday, label[for='Tuesday'] ").val("").attr({'id' : 'Tuesday_'+(c), 'for' : 'Tuesday_'+(c)} ).end().removeClass('clone').appendTo("#additional_products")
.find("#Wednesday, label[for='Wednesday'] ").val("").attr({'id' : 'Wednesday_'+(c), 'for' : 'Wednesday_'+(c)} ).end().removeClass('clone').appendTo("#additional_products")
.find("#Thursday, label[for='Thursday'] ").val("").attr({'id' : 'Thursday_'+(c), 'for' : 'Thursday_'+(c)} ).end().removeClass('clone').appendTo("#additional_products")
.find("#Friday, label[for='Friday'] ").val("").attr({'id' : 'Friday_'+(c), 'for' : 'Friday_'+(c)} ).end().removeClass('clone').appendTo("#additional_products")
.find("#Saturday, label[for='Friday'] ").val("").attr({'id' : 'Saturday_'+(c), 'for' : 'Saturday_'+(c)} ).end().removeClass('clone').appendTo("#additional_products")
.find("#Sunday, label[for='Sunday'] ").val("").attr({'id' : 'Sunday_'+(c), 'for' : 'Sunday_'+(c)} ).end().removeClass('clone').appendTo("#additional_products")
c++;
});
});
$(document).ready(function(){
$("a#rp").click(function () {
if ($("product").length != 1) {
$("product:last").remove();
}
//$('.clone:last').not('.clone:first').remove();
event.preventDefault();
});
});
<div class="control">
<input id="Monday_1" name="Monday[]" type="checkbox" value="" class="is-checkradio is-white" for="Monday_1"> <label for="Monday_1" id="Monday_1">Monday</label>
<input id="Tuesday_1" name="Tuesday[]" type="checkbox" value="" class="is-checkradio is-white" for="Tuesday_1"> <label for="Tuesday_1" id="Tuesday_1">Tuesday</label>
<input id="Wednesday_1" name="Wednesday[]" type="checkbox" value="" class="is-checkradio is-white" for="Wednesday_1"> <label for="Wednesday_1" id="Wednesday_1">Wednesday</label>
<input id="Thursday_1" name="Thursday[]" type="checkbox" value="" class="is-checkradio is-white" for="Thursday_1"> <label for="Thursday_1" id="Thursday_1">Thursday</label>
<input id="Friday_1" name="Friday[]" type="checkbox" value="" class="is-checkradio is-white" for="Friday_1"> <label for="Friday_1" id="Friday_1">Friday</label>
<input id="Saturday_1" name="Saturday[]" type="checkbox" value="" class="is-checkradio is-white" for="Saturday_1"> <label for="Saturday">Saturday</label>
<input id="Sunday_1" name="Sunday[]" type="checkbox" value="" class="is-checkradio is-white" for="Sunday_1"> <label for="Sunday_1" id="Sunday_1">Sunday</label>
</div>
答案
我仍然不知道OP代码应该做什么，所以我用简单的javascript制作了一个简单的日历。
详情在演示中评论
Demo
// Define an index counter
var idx = 0;
/* Define month object
|| properties are predetermined by the month's
|| characteristics.
*/
//* ADD/DEL extra slash at position 1
var FEB = {
short: "FEB",
long: "February",
totalDays: 28,
firstDay: 4
};
// Call genMonth(FEB) passing the FEB Object
genMonth(FEB);
//*/
/* Uncomment this and comment the FEB object */
/* This is just show that this code can accept data on any month
|| as long as it's in the proper format.
*/
/* ADD/DEL slash at position 1
var MAY = {
short: "MAY",
long: "May",
totalDays: 31,
firstDay: 2
};
genMonth(MAY);
//*/
function genMonth(MMM) {
// Reference table
var month = document.querySelector('table');
// Set table id and caption
month.id = MMM.short;
month.firstElementChild.setAttribute('name', MMM.long);
// Get properties of FEB
var dQty = MMM.totalDays;
var xInit = MMM.firstDay;
// First loop is for the weeks offset to 5 loops
for (let w = 0; w < 5; w++) {
// Each row is inserted
var week = month.insertRow();
// On each row an iteration for each day of the week
for (let d = 0; d < 7; d++) {
// if counter is more than there are days in the month...
if (idx >= dQty) {
// stop loop
break;
}
// Insert a new cell into row
var day = week.insertCell();
/* if d is more or equal to the first day or...
|| it's past the 1st week
*/
if (d >= xInit || w >= 1) {
// Increment counter
idx++;
/* Insert a Template Literal into each cell.
|| Note that there are unique values for #ids
|| interpolated in this Template Literal
*/
day.innerHTML = `
<sup>${idx}</sup>
<input id='day${idx}' class='chx' type='checkbox'>
<label for='day${idx}'></label>
`;
}
}
}
}table {
width: 500px;
table-layout: fixed;
border-collapse: collapse;
}
th {
width: 16%;
}
table,
th,
td {
border: 1px solid #000
}
.chx {
display: none
}
label {
display: inline-block;
height: 50px;
width: 100%;
background: rgba(247, 207, 89, 0.4);
float: left;
}
label::before {
font-family: FontAwesome;
font-size: 1.5rem;
content: "f096";
}
.chx:checked+label::before {
content: "f046";
}
sup {
position: relative;
z-index: 1;
float: left;
}
caption::after {
content: attr(name);
font-size: 2rem;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table id=''>
<caption name=''></caption>
<thead>
<tr>
<th>SUN</th>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
</tr>
</thead>
<tbody></tbody>
</table>另一答案
这适用于一个工作日，我需要添加类似于jisaacstone的东西这个 .each & echo json_encode($days)的最后答案
<?php foreach($days as $day){
$weekday = $day;};
?>
<script>
$(document).ready(function(){
var c=1;
var day = '<?php echo $weekday ;?>';
$("a#ap").click(function(){
$("product.clone").clone(false)
.find('#' + day).attr('id', day +'_' +
(c)).end().removeClass('clone').appendTo("#additional_products")
.find("label[for='<?php echo $day; ?>']").attr('for', day + '_' +
(c)).end().removeClass('clone').appendTo("#additional_products")
c++;
});
});
</script>
以上是关于如何简化一周中每天的jquery查找和attr更改的主要内容，如果未能解决你的问题，请参考以下文章
如何更改 Graphite/Grafana 中的 x 轴（按天绘制）？
如何根据 PHP 数据库中的结果在 jQuery 日期选择器上禁用一周中的某些天