Question

在我的wordpress网站上，我创建了一个Ajax搜索并搜索post_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();
}

使用Ajax进行成功搜索后，我需要动态地将post_title从搜索添加到div id="post-container"。

HTML

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

<div id="datafetch"></div>  // successfuly ajax Search Result Here

<div id="post-container"> </div>  // Trying to add post title here

我在搜索结果中创建了一个ADD按钮，将post_title添加到div。

如何使用按钮动态地将post_title从搜索字段添加到div？

Answer 1

您必须将点击事件添加到按钮，然后将post_title和append添加到div：

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

希望这有帮助。

$(function(){
  $('body').on('click', '.post-link', function(){
    var post_title = $(this).closest('div').find('a').text();

    if( $('#post-container p').length < 4 )
    $('#post-container').append( '<p>' + post_title + ' ------ <a href="#" class="remove-title">REMOVE</a></p>' );
    else
      alert('You could add max 4 titles');
  });

  $('body').on('click', '.remove-title', function(){
    $(this).closest('p').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button class="post-link"> ADD </button>
  <li>
    <a href="#">The title 1 HERE</a>
  </li> 
</div>

<div>
  <button class="post-link"> ADD </button>
  <li>
    <a href="#">The title 2 HERE</a>
  </li> 
</div>

<div>
  <button class="post-link"> ADD </button>
  <li>
    <a href="#">The title 3 HERE</a>
  </li> 
</div>

<hr>
<div id="post-container"> </div>

Answer 2

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

<强> PHP：

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();
}

<强> HTML：

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

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

<强> JS：

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

动态添加和删除帖子标题

2 个答案: