使用jquery

Question

好的，所以我有这段代码：

    <div class="tags-column" id="tags">

      <h2>Tags</h2>
      <ul>
        <% @presenter.tag_counters.each do |tag_counter| %>
          <li class="<%= tag_counter.tag %>">
            <%= link_to case_snitches_path(@project, tags: tag_counter.tag), { class: (params[:tags] == tag_counter.tag ? "active tag" : "tag")} do %>
              <span class="tag-name"><%= tag_counter.tag %></span>
              <span class="tag-counts">
                <%= tag_count(tag_counter, :pending) %>
                <%= tag_count(tag_counter, :missing) %>
                <%= tag_count(tag_counter, :reporting) %>
              </span>
            <% end %>
          </li>
        <% end %>
      </ul>
    </div>

页面本身比这大得多。但是使用JQuery我只想在某个事件上更新这部分。我似乎无法找到这个问题的合适答案。以下是我正在使用的当前JS无效：

$(".tags-column").load(document.URL + " .tags-column")

如果我这样做，它只是重复div并拧紧一切。

Answer 1

您要做的是重新渲染页面，就像首次加载时一样，这是javascript无法实现的。您需要做的是加载要加载的文件的内容，然后删除旧内容。您可以处理它以显示您想要的内容。

首先获取url的内容并将其放在一个新的div中：

$(".NEW-tags-column").load("yourfile.html");

请记住，load函数会将文件的内容放在选择器$(".tags-column")中。我不明白为什么你在这里将选择器添加到文件load(document.URL + " .tags-column")？

然后删除<div>的旧内容：

$(".tags-column").remove();

这样您就可以更新内容了。

Answer 2

使用以下代码更新div的html

 $(".tags-column").html("some HTML contents");

或

$("#tags").html("some HTML contents");