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

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

ShuffleJS 無法讀取 null 的屬性“textContent”

ShuffleJS 無法讀取 null 的屬性“textContent”

湖上湖 2023-10-14 18:17:19
我正在學習ShuffleJS以在項目中使用它,但我遇到了搜索功能的問題。當我嘗試搜索我的物品時,我不斷收到此錯誤:無法讀取 null 的屬性“textContent”我從文檔中獲取了搜索代碼,但它似乎對我不起作用。這是我的搜索功能的一些代碼:超文本標記語言<section class="search">  <div class="container">    <div class="row">      <div class="col-12">        <div class="form-group">          <input type="search" id="search" class="form-control">        </div>      </div>    </div>  </div></section><section>  <div class="container">    <div class="row" id="grid">      <div class="box green" data-groups='["green"]' data-title="blue">green</div>      <div class="box red" data-groups='["red"]' data-title="red">red</div>      <div class="box green" data-groups='["green"]' data-title="blue">green</div>      <div class="box red" data-groups='["red"]' data-title="red">red</div>      <div class="box green" data-groups='["green"]' data-title="blue">green</div>      <div class="box red" data-groups='["red"]' data-title="red">red</div>      <div class="col-md-2 my-sizer"></div>    </div>  </div></section>JSconst Shuffle = window.Shuffle;const element = $('#grid');const sizer = $('.my-sizer');const shuffle = new Shuffle(element, {  itemSelector: '.box',  sizer})$('#search').on('keyup', (e) => {  var searchText = e.target.value.toLowerCase();  shuffle.filter((element, shuffle) => {    var titleElement = element.querySelector('.box');    var titleText = titleElement.textContent.toLowerCase().trim(); // <= this is where the error is thrown    return titleText.indexOf(searchText) !== -1;  });})我還嘗試在此處復制并粘貼他們的示例 JS 文件,但我收到了上面提到的相同錯誤。我還在CodePen中重現了上面寫的代碼!有誰知道問題出在哪里嗎?謝謝您的幫助!
查看完整描述

1 回答

?
胡說叔叔

TA貢獻1804條經驗 獲得超8個贊

在你的過濾函數中,它似乎element已經是一個div類了box。因此,無需在內部查找element帶有 class 的元素box,因為您已經得到了它。


所以你可以更換


    var titleElement = element.querySelector('.box');

    var titleText = titleElement.textContent.toLowerCase().trim(); // <= this is where the error is thrown


    var titleText = element.textContent.toLowerCase().trim();


查看完整回答
反對 回復 2023-10-14
  • 1 回答
  • 0 關注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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