Javascript jQuery：如何基于URL附加到特定列表

我有一个包含作业和消息的应用程序。当有人输入作业消息时，我想将该消息附加到特定于作业的显示页面中的消息列表中

例如：如果用户向作业7添加消息，那么我想将该消息附加到url/jobs/7的带有类msg_列表的

按照我的设置方式，所有作业都共享一个显示页面，并且可以通过URL/jobs/：id访问。其中id是特定的作业id

    <div class="show_messages">
      <div class="row">
        <div class="small-12 columns">
          <% messages = @job.messages %>
            <ul class="msg_list">
              <% messages.each do |m| %>
                <% login = m.user_id.present? ? m.user.login : m.runner.login %>
                <li class="message">
                  <p>
                    <strong><%= login %></strong>: <%= m.body %><br>
                    <span id="sent-at">Sent on <%= m.created_at.strftime("%b %d at %l:%M%p") %></span>
                  </p>
                </li>
              <% end %>
            </ul>
          <% end %>
        </div>
      </div>

：

发送

当我尝试添加这样的消息时：

function addMessage(msg) {
    var new_msg = "<li><p> NEW TEST MESSAGE </p></li>";
    $('.msg_list').append(new_msg);
}

函数addMessage（msg）{
var new_msg=“
新测试消息”
”；
$（'.msg_list'）。追加（新消息）；
}

当我只想将它附加到一个特定的作业（例如：id为7的作业）时，我会将它附加到每个作业显示中

---

有人能帮我弄清楚怎么做吗？

获取URL段，然后使用它来获得您想要的工作

var pathArray = window.location.pathname.split( '/' );
var id_from_url = pathArray[2];

$('.msg_list').eq(id_from_url).append(new_msg);

是关于使用javascript获取URL段的指南

---

注意：

.eq（）

是基于零的，因此如果id不是基于零的，您可能需要对其进行偏移。

您可以将其更改为包括id：

 <ul class="msg_list_<%= id %>">

---

您必须弄清楚javascript如何知道id，以及在模板语言构建html时如何设置id。

两种解决方案都有效，但为了解决这个问题，我检查了url，仅在id匹配的情况下才将消息添加到列表中

function addMessage(msg) {
    // var body = msg["body"];
    // $('.msg_list').append(body)
    var new_msg = "<li><p> NEW TEST MESSAGE </p></li>";
    $('.msg_list').append(new_msg);
}

var msgChannel = pusher.subscribe('msg_channel');
msgChannel.bind('msg_added', function(msg) {
    // if (msg["job_id"] == '@job.id'){
    //  addMessage(msg)
    // }
    var message_job_id = msg["job_id"];
    var url = window.location.pathname;
    var job_show_id = url.substring(url.lastIndexOf('/') + 1);
    var show_integer = parseInt(job_show_id);
    if(message_job_id == show_integer) {
        addMessage(msg);
    }
});

函数addMessage（msg）{
//var body=msg[“body”]；
//$（'.msg_list'）。追加（正文）
var new_msg=“
新测试消息”
”；
$（'.msg_list'）。追加（新消息）；
}
var msgChannel=pusher.subscribe（'msg_channel'）；
msgChannel.bind（'msg_added'，函数（msg）{
//如果（msg[“job_id”]='@job.id'）{
//添加消息（msg）
// }
var message_job_id=msg[“job_id”]；
var url=window.location.pathname；
var job_show_id=url.substring（url.lastIndexOf（'/'）+1）；
var show_integer=parseInt（作业显示id）；
if（message\u job\u id==show\u integer）{
添加消息（msg）；
}
});

---

}))

我看了你的答案。您正在获取更新，但您只希望在该页面是您接收信息的作业的页面时显示更新。你说“附加到每个作业显示”，这意味着所有作业都显示在同一个页面上，而你的html只是一个省略了细节的示例。如果我们理解了这一点，你可能会得到一个更好的答案。

function addMessage(msg) {
    // var body = msg["body"];
    // $('.msg_list').append(body)
    var new_msg = "<li><p> NEW TEST MESSAGE </p></li>";
    $('.msg_list').append(new_msg);
}

var msgChannel = pusher.subscribe('msg_channel');
msgChannel.bind('msg_added', function(msg) {
    // if (msg["job_id"] == '@job.id'){
    //  addMessage(msg)
    // }
    var message_job_id = msg["job_id"];
    var url = window.location.pathname;
    var job_show_id = url.substring(url.lastIndexOf('/') + 1);
    var show_integer = parseInt(job_show_id);
    if(message_job_id == show_integer) {
        addMessage(msg);
    }
});