如何使用 Pusher php 和 javascript 替换 id div 中的整个项目

Posted 2023-02-16

【中文标题】如何使用 Pusher php 和 javascript 替换 id div 中的整个项目

【英文标题】：How to replace the whole item inside the id div using Pusher php and javascript

【发布时间】：2016-08-17 07:36:29

【问题描述】：

我想替换 id div 中的整个项目而不是添加它。我不熟悉 javascript/ajax/jquery，我不知道我将编辑哪个文件。 这是pusher.com在activity-stream教程中给出的示例代码

$(function() 
var pusher = new Pusher('pusher key');
var channel = pusher.subscribe('site-activity');
var streamer = new PusherActivityStreamer(channel, '#replace_item');
);

html id 将替换 div 内的所有项目

 <div id="replace_item">ITEMS</div>

这是javascript函数

 function PusherActivityStreamer(activityChannel, ulSelector, options) 
 var self = this;

 this._email = null;

 options = options || ;
 this.settings = $.extend(
 maxItems: 10
  , options);

   this._activityChannel = activityChannel;
   this._activityList = $(ulSelector);

   this._activityChannel.bind('activity', function(activity) 
    self._handleActivity.call(self, activity, activity.type);
   );
   this._activityChannel.bind('page-load', function(activity) 
  self._handleActivity.call(self, activity, 'page-load');
   );
  this._activityChannel.bind('test-event', function(activity) 
   self._handleActivity.call(self, activity, 'test-event');
 );
  this._activityChannel.bind('scroll', function(activity) 
  self._handleActivity.call(self, activity, 'scroll');
);
 this._activityChannel.bind('like', function(activity) 
  self._handleActivity.call(self, activity, 'like');
);

 this._itemCount = 0;
;

 PusherActivityStreamer.prototype._handleActivity = function(activity, eventType) 
  var self = this;
  ++this._itemCount;

 var activityItem = PusherActivityStreamer._buildListItem(activity);
 activityItem.addClass(eventType);
 activityItem.hide();
this._activityList.prepend(activityItem);
 activityItem.slideDown('slow');

if(this._itemCount > this.settings.maxItems) 
this._activityList.find('li:last-child').fadeOut(function()
  $(this).remove();
  --self._itemCount;
  );
 
 ;

PusherActivityStreamer.prototype.sendActivity = function(activityType, activityData) 
var data = 
activity_type: activityType,
activity_data: activityData
;
if(this._email) 
data.email = this._email;

$.ajax(
url: 'php/trigger_activity.php', // PHP
// url: '/trigger_activity', // Node.js
data: data
)
;


PusherActivityStreamer._buildListItem = function(activity) 
var li = $('<li class="activity"></li>');
li.attr('data-activity-id', activity.id);
var item = $('<div class="stream-item-content"></div>');
li.append(item);

var imageInfo = activity.actor.image;
var image = $('<div class="image">' +
              '<img src="' + imageInfo.url + '"   />' +
            '</div>');
item.append(image);

var content = $('<div class="content"></div>');
item.append(content);

var user = $('<div class="activity-row">' +
            '<span class="user-name">' +
              '<a class="screen-name" title="' + activity.actor.displayName + '">' + activity.actor.displayName + '</a>' +
              //'<span class="full-name">' + activity.actor.displayName + '</span>' +
            '</span>' +
          '</div>');
content.append(user);

var message = $('<div class="activity-row">' +
                '<div class="text">' + activity.body + '</div>' +
              '</div>');
content.append(message);

var time = $('<div class="activity-row">' + 
            '<a href="' + activity.link + '" class="timestamp">' +
              '<span title="' + activity.published + '">' +     PusherActivityStreamer._timeToDescription(activity.published) + '</span>' +
            '</a>' +
            '<span class="activity-actions">' +
              '<span class="tweet-action action-favorite">' +
                '<a href="#" class="like-action" data-activity="like"      title="Like"><span><i></i><b>Like</b></span></a>' +
              '</span>' +
            '</span>' +
          '</div>');
  content.append(time);


  return li;
;

【参考方案1】：

如果您想替换整个 div 而不是向其中添加内容，我认为这会起作用。

改变

this._activityList.prepend(activityItem);

为

this._activityList.empty();
this._activityList.prepend(activityItem);

".prepend" 将 activityItem 添加到 div 的顶部，如您所知，但 ".empty()" 会在您执行此操作之前清除 div 中的所有内容。

【讨论】：

谢谢它有效，但我现在的问题是第二次尝试时替换无效，因为我替换的 id 已经消失了。我怎样才能让它工作？

@user3438096 好点。我已经修改了答案，所以它只是在重新填充之前清空它，而不是完全替换它

它有效！谢谢你，如果你不介意，我还有一个问题。如何循环这个“PusherActivityStreamer._buildListItem = function(activity) ”，因为我的“activity”现在是一个包含值列表的数组。当我把它放在 id html 上时，它给出了 undefined。

@user3438096 没问题，如果答案有帮助，请点赞和/或标记为答案。对于您的第二个问题，请参阅 jQuery $.each 方法作为循环数组的最简单方法。 api.jquery.com/jquery.each