如果属性VALUE已经存在,则将其移除,否则将其添加到jQuery



我需要在jQuery中找到一种方法来检查属性VALUE,如果该值包含内容,请删除它,否则添加它。

例如:

<body data-holidays="10 May 2021, 14 May 2021, 24 May 2021">
//If data-holidays INCLUDES 14 May 2021
if ( $('body').attr('data-holidays') == "14 May 2021" ) {
//Delete "14 May 2021" from date-holidays but keep the rest
//Changes it to: "<body data-holidays="10 May 2021, 24 May 2021">"
}
else {
//ADD "10 May 2021" TO the end of date-holidays
$('body').attr("data-holidays", function() { return $('body').attr("data-holidays") + ', 14 May 2021'  });
}

使用正则表达式即可完成以下任务:

const dateselected = "14 May 2021";
const regex = new RegExp(dateselected + "[, ]*");
let sel = $('body').attr('data-holidays');
if ( sel.includes(dateselected)) {
sel = sel.replace(regex,"");
$('body').attr('data-holidays', sel)
}
else {
//ADD "10 May 2021" TO the end of date-holidays
$('body').attr("data-holidays", function() { return $('body').attr("data-holidays") + ', 14 May 2021'  });
}

您可以使用attr(attributeName, function)并将字符串拆分为数组,检查所需字符串是否存在并在需要时将其推送到数组,或者过滤掉,然后返回连接的字符串

function updateHolidays($el, date){
$el.attr('data-holidays',(i, curr)=>{
let arr = curr.split(',').map(v => v.trim());
if(arr.includes(date)){
// is included so remove it
arr = arr.filter(v=> v !== date)
}else{
// not included so add it
arr.push(date)
}
return arr.join(', ')
});
}
// should add one and remove one
const dates = ['14 May 2021','1 Oct 2021'];
const $el = $('[data-holidays]');
// modify multiple dates for demo
dates.forEach(d => updateHolidays($el, d));
//display results
console.log($el.attr('data-holidays'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-holidays="10 May 2021, 14 May 2021">
</div>

最新更新