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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

千巷貓影 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);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form class="user-form">

  <input type="checkbox" name="user" value="121asa31" class="user">

  <input type="checkbox" name="user" value="121fdfd31" class="user">

  <input type="checkbox" name="user" value="1213fd1" class="user">

  <input type="checkbox" name="user" value="121jh31" class="user">

</form>


<div class="block" data-id="">

  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}`);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form class="user-form">

  <input type="checkbox" name="user" value="121asa31" class="user">

  <input type="checkbox" name="user" value="121fdfd31" class="user">

  <input type="checkbox" name="user" value="1213fd1" class="user">

  <input type="checkbox" name="user" value="121jh31" class="user">

  <input type="checkbox" name="group" value="1213fd1" class="check group">

  <input type="checkbox" name="group" value="121jh31" class="check group">

</form>


<div class="block-users" data-user-id="">

  Some Content 

</div>


<div class="block-groups" data-group-id="">

  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();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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" checked>


<div class="block" data-id="">

  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);

}

<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>


查看完整回答
反對 回復 2022-07-08
  • 3 回答
  • 0 關注
  • 127 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號