时间戳

首页 > 解决方案 > jQuery：如何通过超链接过滤掉显示中的 html 标签？

javascript - jQuery：如何通过超链接过滤掉显示中的 html 标签？

问题描述

对于这个 Twitter 克隆，我需要随机生成 10 条带有用户名和消息的推文，然后当您单击它们的句柄时，只显示该用户的推文。

我的问题是，每当我尝试超链接到一个函数时，都会遇到“foo() 不是函数”（除非我的函数是一个简单的警报（'你的锚正在工作'）；）

我认为这可能是因为我不熟悉事件侦听器并且仍然不太了解它们，但是我的截止日期快到了，我希望得到一些指示（：

这是我的 jQuery 代码。它基本上将每条推文推入标签，然后尝试仅整理其中包含单击的超链接文字文本的推文（即使它可能是“不好的做法”，我也可以从“.innerHTML”中获得？）。

$(document).ready(function() {
  var index = streams.home.length - 1;
  while (index >= 0) {
    var d = new Date();
    var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
    var user = $('tweet.user');
    var tweet = streams.home[index];
    var name = tweet.user;
    var $tweet = $('<li>');
    ("#tweets").className = user.toString();
    $tweet.html('<a href=javascript:void(0); onclick= \"filterUsers()\">' + tweet.user + "</a><br><span>" + tweet.message + "<br>" + "~Twiddled at " + time + '~<span>');
    $tweet.appendTo("#tweets");
    index -= 1;
  };

  $('.tweets').css('text-align', 'center');

  function filterUsers() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById('tweets');
    filter = input.value.toUpperCase();
    ul = document.getElementById("tweets");
    li = ul.getElementsByTagName('li');
    for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      txtValue = a.textContent || a.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
  }
});
<head>
  <meta charset="utf-8">
  <title>Twiddler</title>
  <link rel="stylesheet" href="styles.css">
  <script src="jquery.js"></script>
  <script src="data_generator.js"></script>
</head>

<body style="background: limegreen">
  <div class="container">
    <div class="header">
      <div id="logo">
        <a href="index.html">
          <img src="twiddlerLogo.png">
        </a>
      </div>
      <input type="text" id="myInput" onkeyup="searchUser()" search="Search for names">
    </div>
    <div class="wall-container">
      <section class="tweets-container">
        <div id="tweets"></div>
      </section>
    </div>
  </div>
</body>

我尝试实现的一个搜索功能，当我在搜索框中键入时会显示“foo() 未定义”错误

function searchFunction(user) {
  var allTweets = document.getElementsByClassName("tweets").getElementsByTagName("li");
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(allTweets).filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

标签： javascripthtmljqueryfilterundefined

解决方案

推荐阅读