Question

是否有可以附加到单词的事件监听器。因此，当单击单词时，可以在页面上显示定义等信息。使用jQuery

谢谢，亚当

很抱歉没有发布代码。我必须这样做，以便当用户点击列表中某人的名字时，屏幕右侧的数据框将填充艺术品位置的描述。这是我的JSON文件。

到目前为止，这是我的代码

<!DOCTYPE html>
<hmtl lang="en">
    <head>
        <meta charset="utf-8" />
        <title>AJAX</title>
        <link rel="stylesheet" href="styles.css" type="text/css" />
        <script src="jquery.js" type="application/javascript"></script>
        <script src="ajax.js" type="application/javascript"></script>
    </head>
    <body>
      <div id="loaded-data"></div>
      <div id="result-box"></div>
    </body>
  </hmtl>

$(function() {

let request = $.ajax({
  method: 'GET',
  url : 'people.json',
  dataType: 'json',
});

request.done(function(data) {
  let list = data.body.list;
  let resultBox = $('#result-box');
  let unorderedList = $('<ul>');
  resultBox.append(unorderedList);

  for (let person of list) {
    let listItem = $('<li>');
    listItem.text(person.name);
    listItem.attr('data-url', person.links[0].href);
    unorderedList.append(listItem);
  }

});

request.fail(function(response) {
  console.log('ERROR: ' + response.statusText);

});

});

  {
  "links":[{"rel":"self","href":"http://www.philart.net/api/people.json"},{"rel":"parent","href":"http://www.philart.net/api.json"}],
  "head":{"title":"People","type":"listnav"},
  "body":{
  "list":[
  {"name":"Adam","links":[{"rel":"self","href":"http://www.philart.net/api/people/325.json"}]},
  {"name":"Abigail Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/157.json"}]},
  {"name":"John Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/410.json"}]},
  {"name":"Samuel Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/439.json"}]},
  {"name":"Lin Zexu","links":[{"rel":"self","href":"http://www.philart.net/api/people/347.json"}]},
  {"name":"James A. Zimble","links":[{"rel":"self","href":"http://www.philart.net/api/people/345.json"}]},
  {"name":"Doris Zimmerman","links":[{"rel":"self","href":"http://www.philart.net/api/people/171.json"}]}
  ]
  }
  }

Answer 1

Teemu已经提到了在评论中完成此行为的方法。您可以按照以下方式执行此操作

// handle click and add class
$(".word").click(function() {
  var word = $(this).text()
  alert(word);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="word">Hello</p>
</div>

Answer 2

你可以替换这个单词并用div包装。

    $('p').html(function(index, value) {

        return value.replace(/\b(here)\b/g, '<div class ="event">here</div>');

    });


    $('.event').click(function() {

        console.log('definition');

    });

<p>This is the information: Click here.</p>

任何事件监听器

2 个答案: