首頁猿問將字符串轉換為數組并正確顯示 ID？

將字符串轉換為數組并正確顯示 ID？

JavaScript

千巷貓影 2022-07-08 10:43:17

單擊復選框時，我試圖獲取該復選框的 id 并將其放入數組中，以便我可以在 data-id 屬性中正確顯示它。因此，一旦我單擊復選框，應在帶有類塊的 div 的 data-id 屬性中添加或刪除 id 這是 jsfiddle https://jsfiddle.net/chille1987/5g28uoqk/25/<input type="checkbox" id="121asa31" class="user"><input type="checkbox" id="121fdfd31" class="user"><input type="checkbox" id="1213fd1" class="user"><input type="checkbox" id="121jh31" class="user"><div class="block" data-id=""> Some Content </div>$('.user').on('click', function() { id = $(this).attr('id'); users = $('.block').data('data-id') if($(this).is(':checked')) { users.push(id); users.toString(); $('.block').attr('data-id', users); } else { index = users.indexOf(id); users.splice(index, 1); $('.block').attr('data-id', users); }});預期結果應如下所示<div class="block" data-id="121asa31, 121jh31"></div>

查看完整描述

3 回答

aluckdog

TA貢獻1847條經驗獲得超7個贊

您可以通過將<input>元素包裝在<form>標簽中并偵聽change表單上的事件來簡化此操作。每當用戶選中或取消選中復選框時，都會發生更改事件。每當發生更改時，使用.serializeArray()獲取包含在表單中檢查的所有值的數組。然后使用.map()數組的方法僅從每個檢查的輸入中獲取 id 值，并將這些值連接起來.join()，將數組轉換為 id 以逗號分隔的字符串。并使用data-id新字符串設置結果。

$('.user-form').on('change', function(event) {

var $form = $(this);

var data = $form.serializeArray();

var users = data.map(({ value }) => value).join(', ');

$('.block').attr('data-id', users);

});

</form>

Some Content

</div>

用戶和組示例

function filterIdsByName(name, data) {

return data

.filter(item => item.name === name)

.map(({ value }) => value)

.join(', ');

}

$('.user-form').on('change', function(event) {

var $form = $(this);

var data = $form.serializeArray();

var groups = filterIdsByName('group', data);

var users = filterIdsByName('user', data);

$('.block-groups').attr('data-group-id', groups);

$('.block-groups').html(`Group ids: ${groups}`);

$('.block-users').attr('data-user-id', users);

$('.block-users').html(`User ids: ${users}`);

});

</form>

Some Content

</div>

Some Content

</div>

反對回復 2022-07-08

天涯盡頭無女友

TA貢獻1831條經驗獲得超9個贊

您正在尋找的是一個列表而不是一個數組。對于復選框，您希望使用changenot click，因為單擊可能會無意觸發。

您始終可以將一個名為 users 的變量設置為一個數組，然后簡單地修改該數組，然后使用它來設置 data-id。

我還更新了函數以在負載時運行并且更簡單。

function save_users(){

var users = [];

$(".user:checked").each(function(){

users.push($(this).attr('id'));

});

users = users.join(",");

$('.block').attr('data-id', users);

}

$('.user').on('change', function() {

save_users();

});

save_users();

Some Content

</div>

反對回復 2022-07-08

慕的地6264312

TA貢獻1817條經驗獲得超6個贊

Javascript香草解決方案

let checkboxes = document.getElementsByClassName("user");

for (let i = 0; i < checkboxes.length; i++) {

checkboxes[i].addEventListener("change", checkBoxChanged);

}

let checkedIDs = [];

function checkBoxChanged() {

if (event.target.checked) {

checkedIDs.push(event.target.id);

} else {

if (checkedIDs.indexOf(event.target.id) > -1) {

checkedIDs.splice(checkedIDs.indexOf(event.target.id), 1)

}

console.log(checkedIDs);

let myDiv = document.getElementsByClassName("block")[0];

myDiv.setAttribute("id", checkedIDs);

}

Some Content

</div>

反對回復 2022-07-08

3 回答
0 關注
127 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將字符串轉換為數組并正確顯示 ID？

將字符串轉換為數組并正確顯示 ID？

3 回答

添加回答

將字符串轉換為數組并正確顯示 ID？