Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
153 views
in Technique[技术] by (71.8m points)

javascript - 如何在js,jquery,html中创建适当的click事件(How to create a proper click event in js, jquery, html)

So as an assignment I need to create a barebones twitter clone.

(因此,作为一项任务,我需要创建一个准系统的Twitter克隆。)

I was given a script that creates random tweets from four users and to display them I'm simply using an interval.

(我得到了一个脚本,该脚本可以从四个用户创建随机推文,并且要显示它们,我只是在使用一个间隔。)

My issue is that one of the condition requires that if the user clicks on one of the usernames, the website should show that users tweet history.

(我的问题是,其中一种条件要求,如果用户单击用户名之一,则网站应显示用户的推文历史记录。)

The tweets are all stored inside the generator file.

(这些推文都存储在生成器文件中。)

I have literally been trying for over a day to get a dynamic click script to run.

(实际上,我已经尝试了一天多的时间来运行动态点击脚本。)

I every time a tweet gets appended to the website it has a class of the users name.

(每当我在网站上附加一条推文时,都会使用一类用户名。)

The closest I have gotten in terms of logic was to put an onclick=functionName(userclass) inside the anchor of my username.

(就逻辑而言,我得到的最接近的结果是将onclick = functionName(userclass)放在我的用户名的锚点内。)

But it is out of scope.

(但这超出了范围。)

I'm pretty new at html/jquery.

(我是html / jquery的新手。)

In fact it is my first week so I have been reading up for hours and you all know how it is when you start learning this stuff.

(实际上,这是我的第一个星期,所以我已经阅读了几个小时,并且大家都知道当您开始学习这些东西时情况如何。)

The more you read, the more questions you have.

(您阅读的内容越多,所提出的问题就越多。)

Hope somebody can shine some light

(希望有人可以发光)

Here's the code:

(这是代码:)

<!DOCTYPE html> <html>   <head>

    <title>TWIDDLER</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery.js"></script>
    <script src="data_generator.js"></script>
    <script src="history.js"></script>   </head>

  <body>
    <img class="bird" src="icon.png">
    <h1>
      <span class='title' id="top">TWIDDLER (def not Twitter)</span>
    </h1>

    <script>
      $(document).ready(function(){
        var $body = $('.tweets');
        var index = 0;
        setInterval(function(){
          var tweet = streams.home[index];
          var $tweet = $('<div></div>');
          var hypername = tweet.user; 
          var $username = $("<a onclick='gethistory("+hypername+")' href='#top' class='"+hypername+"'><span></span></a>");
          var $endline = $('<br>');
          console.log($username);
          var time = tweet.created_at.toLocaleTimeString();
          $tweet.text(tweet.message + ' | ' + tweet.created_at.toLocaleTimeString());
          $username.text('@' + tweet.user + ': ');
          $username.appendTo($body)
          $tweet.appendTo($body);
          // console.log($tweet);
          // var testname = $('<h6></h6>').text('***'+hypername+'***').appendTo($body);
          $endline.appendTo($body);
          index += 1;
        }, 2000);
         var gethistory = function(name) {
           console.log("I clicked it");
          for (var i = 0; i < streams.users[name].length; i++) {
            var tweethist = streams.users[name][i];
            var $tweethist = $('<div></div>');
            var $endline = $('<br>');
            $tweethist.text(tweet.message + ' | ' + tweet.created_at.toLocaleTimeString());
            $tweethist.appendTo('#history');
            $endline.appendTo('#history');
          }
        };
      });
    </script>

    <h3>
    <section class="row">

        <div class="column1 tweets left"><h2>Tweeds</h2></div>

        <div class="column2 right" id="history"></div>

    </section>
    </h3>

    <!-- <section>
      <audio controls autoplay src="song.mp3"></audio>
    </section> -->

  </body>

</html>
  ask by Imsuchacoder translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

@Imsuchacoder

(@Imsuchacoder)

Your code shows a poor understanding of HTML DOM and Javascript variable scope.

(您的代码对HTML DOM和Javascript变量范围了解甚少。)

Developers may find your question as "a lot to explain".

(开发人员可能会发现您的问题“需要解释很多”。)

(1).

((1)。)

You have to get a good understanding of HTML structure.

(您必须对HTML结构有一个很好的了解。)

Learn about DOM: https://en.wikipedia.org/wiki/Document_Object_Model and https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

(了解有关DOM的信息: https : //en.wikipedia.org/wiki/Document_Object_Modelhttps://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)

If you don't write it correctly, browser will behave not as you intended.

(如果您编写不正确,浏览器将无法正常运行。)

(2).

((2)。)

Your code won't work because gethistory is in a local scope while you're trying to access it from a global scope.

(您的代码无法正常工作,因为在尝试从全局范围访问gethistory它位于本地范围内。)

Try define function gethistory in global scope.

(尝试在全局范围内定义函数gethistory)

Learn more about variable scope here: https://www.w3schools.com/js/js_scope.asp and here What is the scope of variables in JavaScript?

(在此处了解有关变量范围的更多信息: https : //www.w3schools.com/js/js_scope.asp以及此处JavaScript中变量的范围是什么?)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...