Question

我的HTML div类似于星级评分系统。

我正在尝试简单地测试一些javascript，以便当我单击星号时控制台将记录“ hello”。

<div class=rating>
    <div class="ratings_stars" data-rating="1"></div>
    <div class="ratings_stars" data-rating="2"></div>
    <div class="ratings_stars" data-rating="3"></div>
    <div class="ratings_stars" data-rating="4"></div>
    <div class="ratings_stars" data-rating="5"></div> 
</div>

$('.ratings_stars').on('click', function() {
    console.log('Hello');
});

JS在一个单独的文件中，我已经很好地链接了。

Answer 1

您的类需要用引号引起来，并将jQuery侦听器放置在文档就绪函数中：

$(document).ready(function() {
  $('.ratings_stars').on('click', function() {
    console.log('Hello');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
  <div class="ratings_stars" data-rating="1">Click me</div>
  <div class="ratings_stars" data-rating="2">Click me</div>
  <div class="ratings_stars" data-rating="3">Click me</div>
  <div class="ratings_stars" data-rating="4">Click me</div>
  <div class="ratings_stars" data-rating="5">Click me</div>
</div>

Answer 2

全部排序。

需要包装DOMReady事件。

感谢大家的帮助。

def set_tags
  tag_instances = self.tags.map do |tag|
    if tag.is_a?(String)
      Tag.where(title: tag).first_or_create do |t|
        t.task_tags.create(task_id: self.id) # This will create new entries for task_tags with tag_id as t.id and task_id as self.id
      end
    else
      tag
    end
  end
  self.tags = tag_instances
end

Answer 3

使用MichaelvE答案作为代码。我想在您的代码中添加以下内容：

$(document).ready(function() {
  $('.ratings_stars').on('click', function() {
    console.log('Hello');
  });
});

$(document).ready(function() {/* code to be executed */});部分是建立DOM的必要条件。 DOM 是一个内存中的树，类似于HTML文件的表示形式，我们可以通过JS / JQuery进行编程更改。 JQuery的作用是向所有包含rating_stars类的所有DOM元素添加一个事件侦听器。

JS引擎可以在构建DOM之前执行代码。这将导致错误，因为JQuery尝试将事件处理程序附加到不存在的DOM元素上。

控制台在onClick事件后未记录日志

3 个答案: