在jQuery中动态地将帖子标题添加到列表中

Question

更新： 我已经设法让它工作了，但是我正在尝试添加一些附加功能，但运气不佳，

我正在使用下面的代码

jQuery(document).ready(function () {
    jQuery("ul.activities_list").append(jQuery.cookie("listItem"), {
                expires: 365,
                path: '/'
            }); //<---end of $.cookie);
  jQuery(".activity").on("click", ".add_activity", function() {

   // jQuery(".add_activity").live('click',function () {
        var title = jQuery(this).parent().parent().find('.title').html();

        // Add activity item to the panel list.
        jQuery("ul.activities_list").prepend(jQuery('<li>'+title+'<button id="remove_item" class="button is-primary is-white">Remove</button></li>'));

        jQuery.cookie("listItem", ((jQuery.cookie("listItem") ? jQuery.cookie("listItem") : '') + jQuery('<li>'+title+'<button id="remove_item" class="button is-primary is-white">Remove</button></li></li>').clone().wrap('<div />').parent().html()));
    });
    jQuery("#remove_item").live('click',function () {

        jQuery(this).parent().remove();
        var removed_item = jQuery('.activities_list').html();

        jQuery.cookie("listItem", removed_item);
    });
});

但它不会保存/更新站点范围内的 cookie（即使我已将路径设置为“/”。

此外，这些值是通过隐藏字段以表单形式发送的。有没有办法去掉 li 和 a 标签，让 +title+ 只存储在一个数组中？

我在https://wincstudio.co.uk/henqueens 上有一个临时站点

——

以前的

我在页面上有一个帖子列表，其中有一个按钮可以将每个帖子添加到 jQuery 中的列表中。

用户应该能够从填充的列表中删除一个项目，并且 cookie 应该保存列表，这样它就不会在刷新时消失。

我从这里尝试了一些代码，这些代码只引入了第一个帖子。所以我试图重新开始，但运气不佳。

//php

<ul class="activities">
  <?php
    global $post;
    $args = array( 'numberposts' => 5 );
    $myposts = get_posts( $args );
    foreach( $myposts as $post ) :  setup_postdata($post); ?>
<li class="activity">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

<button type="submit" class="add" id="add_activity">Add Activity</button>

</li>
<?php endforeach; wp_reset_postdata(); ?>
</ul>

///panel

<ul class="activities_list">
  <li>When button#add_activity is clicked to appear  here<button>Remove</button></li>
  <li>Activity <button>Remove</button></li>
  <li>Activity <button>Remove</button></li>
</ul>


//jQuery

$(document).ready(function () {
    $("ul.activities").append($.cookie("listItem"));
    $("#add_activity").click(function () {
        $('ul.activities').prepend($('<li>List Item</li>');

        $.cookie("listItem", (($.cookie("listItem") ? $.cookie("listItem") : '') + newLi.clone().wrap('<div />').parent().html()));
    });
});

Answer 1

我已经更新了你的代码，你可以检查一下。在检查之前请删除与之相关的cookies。

<ul class="activities">
  <?php
    global $post;
    $args = array( 'post_type' => 'page','numberposts' => 5, 'order'=>'ASC' );
    $myposts = get_posts( $args );
    foreach( $myposts as $post ) :  setup_postdata($post); ?>
<li class="activity">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

<button type="submit" class="add add_activity" id="add_activity">Add Activity</button>

</li>
<?php endforeach; wp_reset_postdata(); ?>
</ul>

<ul class="activities_list">

</ul>

<script>
//jQuery

jQuery(document).ready(function () {
    jQuery("ul.activities_list").append(jQuery.cookie("listItem"));
    jQuery(".add_activity").click(function () {
        var title = jQuery(this).parent().find('a').html();
        jQuery(this).parent().parent().next('ul').prepend(jQuery('<li>'+title+'<button class="remove_item">Remove</button></li>'));

        jQuery.cookie("listItem", ((jQuery.cookie("listItem") ? jQuery.cookie("listItem") : '') + jQuery('<li>'+title+'<button class="remove_item">Remove</button></li></li>').clone().wrap('<div />').parent().html()));
    });
    jQuery(".remove_item").live('click',function () {

        jQuery(this).parent().remove();
        var removed_item = jQuery('.activities_list').html();

        jQuery.cookie("listItem", removed_item);
    });
});
   </script>