私信  •  关注

connexo

connexo 最近创建的主题
connexo 最近回复了
2 年前
回复了 connexo 创建的主题 » 与on()jquery API完全类似的JavaScript是什么?

这个imo将与vanilla JS完全类似:

document.addEventListener('click', function(event) {
    const desiredTargetElement = event.target.closest('.js-ya-share2-button'); 
    if (desiredTargetElement)
        desiredTargetElement.parentElement.querySelector('.ya-share2__item_more').click();
});

我们需要合作的原因 closest 这里不是检查事件目标是否具有所需的类,而是可以在某些场景中,单击的元素实际上是您要查找的元素的后代。

closest(selector) ,如果在已匹配所需的元素上调用 selector ,将返回元素本身。

你可以用 Array.prototype.pop 这里,如果你切换到vanilla JS(我强烈推荐,jQuery已经成为过去):

document.querySelectorAll('.messages').forEach(el => {
  el.addEventListener('click', function(event) {
    if (event.target.matches('.message__action.message__edit[data-midedit]')) {
      t_msg = event.target.closest('.message-bubble');
      old_text = [...t_msg.querySelectorAll('[data-resendtext]')].pop().dataset.resendtext;
      console.log(old_text);
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="messages">
  <div class="message-bubble" data-mid="1">
    <div class="message-bubble-inner">
      <div class="message-text resend_contain">
        <div class="message-text-resend" style="display:none">
          <div class="message-text-resend-text">
            <p data-resendtext="A quotation">A quotation</p>
            <div></div>
            <div></div>
          </div>
        </div>
        <p data-resendtext="First text Id like to get">Lorem ipsum</p>
      </div>
    </div>
    <span class="message__action message__edit" data-midedit="1">Click</span>
  </div>
  <div class="message-bubble" data-mid="2">
    <div class="message-bubble-inner">
      <div class="message-text resend_contain">
        <div class="message-text-resend" style="display:none">
          <div class="message-text-resend-text">
            <p data-resendtext="Another quotation">Another quotation</p>
            <div></div>
            <div></div>
          </div>
        </div>
        <p data-resendtext="Another text Id like to get">Lorem ipsum</p>
      </div>
    </div>
    <span class="message__action message__edit" data-midedit="2">Click</span>
  </div>
</div>
4 年前
回复了 connexo 创建的主题 » 为什么在jquery循环中返回不起作用?

return 仅在您的第一个示例中 返回 从您传递给的迭代器函数 forEach 是的。

但是返回的值总是未定义的。

那是因为你的 find_object 函数不返回任何特定的内容。没有显式返回的函数的标准返回值是 undefined 在javascript中。

还有,你为什么不使用 Array.prototype.find() 是吗?使用起来就像

function find_object(id) {
    return array_of_objects.find(obj => obj.id === id);
}

或者,如果你只想 name 从中:

function find_object(id) {
    return { name } = array_of_objects.find(obj => obj.id === id);
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

4 年前
回复了 connexo 创建的主题 » 将jquery代码转换为filter list by复选框转换为普通JS

我想为大家介绍一个更简洁的答案。

我在作为应用的定位点的复选框周围添加了标签和包装元素。 代表倾听 到(所以这段代码中只需要侦听器)。

colorfilter.addEventListener('change', (e) => {
  let selectedColors = [...colorfilter.querySelectorAll(':checked')].map(x => x.dataset.color);
  for (const listItem of document.querySelectorAll('.list')) {
    listItem.classList[selectedColors.includes(listItem.dataset.color) 
      ? 'add' 
      : 'remove']('show');
  }
})
.list {
  display: none;
}

.show {
  display: list-item;
}
<div id="colorfilter">
  <label><input type="checkbox" class="checkbox" data-color="blue"> Blue</label>
  <label><input type="checkbox" class="checkbox" data-color="green"> Green</label>
  <label><input type="checkbox" class="checkbox" data-color="red"> Red</label>
</div>

<ul>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="green">Green</li>
  <li class="list" data-color="red">Red</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="green">Green</li>
</ul>