Question

我是ajax的新手。我想在页面上放置一个组合框。 Combobox包含选项按人气，按价格和按日期计算。

我想用ajax更改div的内容而不重新加载页面。

例如我正在展示手表产品。当用户更改组合框中的值时，页面上显示的值/图像将相应更改。

1）我想知道如何使用word按下ajax。 2）实现此目的的代码。

我正在使用此代码：

            <div class="prodimg">


<ul class="rcollpro">

    <?php
        $ordr ='date';
        $args = array( 'post_type' => 'product',  'product_cat' => 'Rings', 'stock' => 1, 'posts_per_page' => 12, 'orderby' =>'$ordr','order' => 'DESC' );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                <li class="rcollproli">    

                    <a href="<?php the_permalink(); ?>"><?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; ?></a>

                        <h3><?php the_title(); ?></h3>

                           <span class="price"><?php echo $product->get_price_html(); ?></span><br />



                    <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
                </li><!-- /span3 -->
    <?php endwhile; ?>
    <?php wp_reset_query(); ?>

</ul><!-- /row-fluid -->

            </div>

Answer 1

您实际上并不需要实现Ajax，但您可以使用简单的JS来实现它。我可以与您分享一个简单的代码供您参考。

<script type="text/javascript">
 function hourChange(selectObj) {
   var selectIndex=selectObj.selectedIndex;
   var selectValue=selectObj.options[selectIndex].text;
   var output=document.getElementById("output");
   //alert(output.innerText);
   output.innerHTML=selectValue;
 }

</script>

<select id="hour" onchange="hourChange(this);">

  <option>1</option>
  <option>2</option>

</select>

<p/>

you selected: <span id="output">1</span>

在简单的HTML文件中尝试此操作。而且在WP中也很容易实现它。

Answer 2

您可以在下面找到适用于您的代码的解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#selector").change(function() {
   var selectedValue = $("#selector option:selected").val();
   alert('Selected text ' + selectedValue);
});});
</script>
</head>

    <body>
<select name="orderby" class="orderby" id="selector"> 
<option value="menu_order">Default sorting</option> 
<option value="popularity">Sort by popularity</option> 
<option value="date ">Sort by newness</option> 
<option value="price">Sort by price: low to high</option> 
<option value="price-desc">Sort by price: high to low</option> 
</select> 
</body>
</html>

我如何使用ajax与wordpress

2 个答案: