Javascript 动态添加和删除帖子标题

在我的wordpress网站中，我创建了一个Ajax搜索和搜索

post\u title

。代码在这里

函数和脚本：

<?php
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
 <script type="text/javascript">
  function fetch(){
  jQuery.ajax({
      url: ajaxwpse.ajaxurl,
      type: 'post',
      data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
      success: function(data) {
          jQuery('#datafetch').html( data );
    }
  });
 }
</script>
<?php
 }
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
  function data_fetch(){

    if (  esc_attr( $_POST['keyword'] ) == null ) { die(); }
     $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('mobile','tablet') ) );
    if( $the_query->have_posts() ) :
    while( $the_query->have_posts() ): $the_query->the_post(); ?>

    <div>
    <button class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
    <li><a href="#" id="<?php the_ID(); ?>"><?php the_title();?></a></li> 
    </div>

    <?php endwhile;
    wp_reset_postdata();  
    endif;
    die();
}

add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

  if (  esc_attr( $_POST['keyword'] ) == null ) { die(); }
  $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('mobile','tablet') ) );
  if( $the_query->have_posts() ) :

  // compose $post_title 
  $post_title = "...";

  echo "<div id=\"datafetch\">";
  while( $the_query->have_posts() ): $the_query->the_post(); ?>

    <div>
    <button class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
  <li><a href="#" id="<?php the_ID(); ?>"><?php the_title();?></a></li> 
    </div>

  <?php endwhile;
  echo "</div><div id=\"post-container\">" . $post_title . "</div>";
  wp_reset_postdata();  
  endif;
  die();
}

<input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search to add"></input>

<div id="result"></div>

// in your ajax call
success: function(data) {
  jQuery('#result').html( data );
}

我在搜索结果中创建了一个

ADD

按钮，将帖子标题添加到div中

---

如何使用按钮将帖子标题从搜索字段动态添加到div？

您必须将点击事件附加到按钮上，以获取

帖子标题

并

将其附加到div：

$(function(){
    $('body').on('click', '.post-link', function(){
        var post_title = $(this).closest('div').find('a').text();
        $('#post-container').append( post_title );
    });
});

希望这有帮助


$（函数（）{
$（'body'）。在（'click'，'post link'，函数（）上{
var post_title=$（this）.closest（'div'）.find（'a'）.text（）；
如果（$（'#邮政集装箱p'）。长度<4）
$（“#post container”）.append（“”+post_title+”--
”）；
其他的
警报（“最多可添加4个标题”）；
});
$（'body'）。在（'click'，'上。删除标题'，函数（）{
$（this）.closest（'p'）.remove（）；
});
});

添加


添加


添加



您必须将单击事件附加到按钮上，以获取
发布标题
并将其附加到div中：

$(function(){
    $('body').on('click', '.post-link', function(){
        var post_title = $(this).closest('div').find('a').text();
        $('#post-container').append( post_title );
    });
});

希望这有帮助


$（函数（）{
$（'body'）。在（'click'，'post link'，函数（）上{
var post_title=$（this）.closest（'div'）.find（'a'）.text（）；
如果（$（'#邮政集装箱p'）。长度<4）
$（“#post container”）.append（“”+post_title+”--
”）；
其他的
警报（“最多可添加4个标题”）；
});
$（'body'）。在（'click'，'上。删除标题'，函数（）{
$（this）.closest（'p'）.remove（）；
});
});

添加


添加


添加



在PHP函数中组合两个div，然后将它们放在一个
中，如下所示：

PHP:

<?php
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
 <script type="text/javascript">
  function fetch(){
  jQuery.ajax({
      url: ajaxwpse.ajaxurl,
      type: 'post',
      data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
      success: function(data) {
          jQuery('#datafetch').html( data );
    }
  });
 }
</script>
<?php
 }
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
  function data_fetch(){

    if (  esc_attr( $_POST['keyword'] ) == null ) { die(); }
     $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('mobile','tablet') ) );
    if( $the_query->have_posts() ) :
    while( $the_query->have_posts() ): $the_query->the_post(); ?>

    <div>
    <button class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
    <li><a href="#" id="<?php the_ID(); ?>"><?php the_title();?></a></li> 
    </div>

    <?php endwhile;
    wp_reset_postdata();  
    endif;
    die();
}

add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

  if (  esc_attr( $_POST['keyword'] ) == null ) { die(); }
  $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('mobile','tablet') ) );
  if( $the_query->have_posts() ) :

  // compose $post_title 
  $post_title = "...";

  echo "<div id=\"datafetch\">";
  while( $the_query->have_posts() ): $the_query->the_post(); ?>

    <div>
    <button class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
  <li><a href="#" id="<?php the_ID(); ?>"><?php the_title();?></a></li> 
    </div>

  <?php endwhile;
  echo "</div><div id=\"post-container\">" . $post_title . "</div>";
  wp_reset_postdata();  
  endif;
  die();
}

<input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search to add"></input>

<div id="result"></div>

// in your ajax call
success: function(data) {
  jQuery('#result').html( data );
}

在PHP函数中组合两个div，然后将它们放在一个
中，如下所示：

PHP:

<?php
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
 <script type="text/javascript">
  function fetch(){
  jQuery.ajax({
      url: ajaxwpse.ajaxurl,
      type: 'post',
      data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
      success: function(data) {
          jQuery('#datafetch').html( data );
    }
  });
 }
</script>
<?php
 }
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
  function data_fetch(){

    if (  esc_attr( $_POST['keyword'] ) == null ) { die(); }
     $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('mobile','tablet') ) );
    if( $the_query->have_posts() ) :
    while( $the_query->have_posts() ): $the_query->the_post(); ?>

    <div>
    <button class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
    <li><a href="#" id="<?php the_ID(); ?>"><?php the_title();?></a></li> 
    </div>

    <?php endwhile;
    wp_reset_postdata();  
    endif;
    die();
}

add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

  if (  esc_attr( $_POST['keyword'] ) == null ) { die(); }
  $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('mobile','tablet') ) );
  if( $the_query->have_posts() ) :

  // compose $post_title 
  $post_title = "...";

  echo "<div id=\"datafetch\">";
  while( $the_query->have_posts() ): $the_query->the_post(); ?>

    <div>
    <button class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
  <li><a href="#" id="<?php the_ID(); ?>"><?php the_title();?></a></li> 
    </div>

  <?php endwhile;
  echo "</div><div id=\"post-container\">" . $post_title . "</div>";
  wp_reset_postdata();  
  endif;
  die();
}

<input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search to add"></input>

<div id="result"></div>

// in your ajax call
success: function(data) {
  jQuery('#result').html( data );
}

与其只替换
#datafetch
的内容，不如将
#post container
div添加到生成的HTML中，并将两者都插入父div中？@ChrisG请发布关于这个想法的答案。用答案解释如何操作？与其只替换
#datafetch
的内容，为什么不将
#post container
div添加到生成的HTML中，并将两者插入父div中呢？@ChrisG请发布关于这个想法的答案。用答案解释如何添加？我如何将其限制为最多添加4个帖子标题。如果我添加了错误的标题，如何将其从div#post-container中删除。
post#u title
只是一个字符串？请检查我的更新中的片段，我希望它能给你一个想法。谢谢它的工作。关于最大添加标题4我如何将其限制为最多添加4个post_标题。如果我添加了错误的标题，如何将其从div#post-container中删除。
post#u title
只是一个字符串？请检查我的更新中的片段，我希望它能给你一个想法。谢谢它的工作。和一些关于最大添加标题4