Question

我有一个 jquery on('click')，我在数组中添加了html内容。

var starred_messages = [];

$(document).on('click', '.star', function () {
    var starred_msg = $(this).parent().html();              
    starred_messages.push("<div class='clearfix'>"+starred_msg+"</div>");

    console.log(starred_messages);

    $(this).toggleClass('star starred');
});

因此，每次点击星级课程时，都会在 starred_messages 数组上添加html内容，我正在使用数组< / em>在弹出式模式上显示。

当我点击两个星级类时，我的数组就是这样。

(2) ["<div class='clearfix'><span class="chat-img pull-l…phicon-time"></span>27 Dec, 1:09 pm</small></div>", "<div class='clearfix'><span class="chat-img pull-l…phicon-time"></span>26 Dec, 6:18 pm</small></div>"]

当我再次点击时，我也想从数组中删除html。

我尝试使用过滤器方法，但它无效。

$(document).on('click', '.starred', function () { var starred_msg = $(this).parent().html(); starred_messages = starred_messages.filter(e => e !== starred_msg); console.log(starred_messages); $(this).toggleClass('starred star'); });

Note我使用.toggleClass在明星和已加星标之间进行更改。

Answer 1

我建议更清洁的方法，您不会在每次点击时创建数组，只需在需要时动态创建

function getStarredMessages()
{
   return $( ".starred" ).toArray().map( function( ele ){
      return "<div class='clearfix'>" + ele.parentNode.innerHTML + "</div>";
   });
}

或仅map

function getStarredMessages()
{
   return $( ".starred" ).map( function( ele ){
      return "<div class='clearfix'>" + ele.parentNode.innerHTML + "</div>";
   });
}

您的其他活动应该变得更简单

$(document).on('click', '.star, .starred', function () {
    $(this).toggleClass('star starred');
});

Answer 2

var starred_messages = [];
$(document).on('click', '.star', function () {
   var starred_msg = $(this).html();              
    starred_messages.push("<div class='clearfix'>"+starred_msg+"</div>");

    console.log(starred_messages);
    
  $(this).toggleClass('star starred');
});

$(document).on('click', '.starred', function () {
    var starred_msg = $(this).html();
    starred_msg = "<div class='clearfix'>"+starred_msg+"</div>";
    starred_messages = starred_messages.filter(e => e !== starred_msg);
    console.log(starred_messages);
   $(this).toggleClass('starred star');
});

.starred{
  color : blue;
}

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

替换

var starred_msg = $(this).parent().html();

到

var starred_msg = $(this).parent().html();
starred_msg = "<div class='clearfix'>"+starred_msg+"</div>";

最终守则： -

$(document).on('click', '.starred', function () {
    var starred_msg = $(this).parent().html();
    starred_msg = "<div class='clearfix'>"+starred_msg+"</div>";
    starred_messages = starred_messages.filter(e => e !== starred_msg);
    console.log(starred_messages);

    $(this).toggleClass('starred star');
});

因为在将消息推送到数组时，您将在消息中添加额外的div： -

"<div class='clearfix'>"+msg+"</div>";

虽然删除你的比较没有额外的div。

Answer 3

问题在于，当您从.star切换到.starred时，您正在更改HTML，而您的filter仅适用于完全匹配。要解决此问题，您可以使用邮件id中现有的li属性存储已加星标的邮件地图：

const starred_messages = {};    

$(document).on('click', '.star', function () {

    var starred_msg = $(this).parent().html();              
    starred_messages[$('li', this.parentElement).attr('id')] = "<div class='clearfix'>"+starred_msg+"</div>";

    console.log(starred_messages);

    $(this).toggleClass('star starred');
});

$(document).on('click', '.starred', function () {
    delete started_messages[$('li', this.parentElement).attr('id')];
    console.log(starred_messages);

    $(this).toggleClass('starred star');
});

如果要迭代消息，只需使用Object.keys方法：

Object.keys(starred_messages).forEach((id) => { console.log(starred_messages[id]); });

编辑：如果由于某种原因您无法使用ES6，这也适用于ES5，只需将let和const替换为var，并使用{{1} function(id) { }

的insteand

从数组中过滤html

3 个答案: