在wordpress中类别中的所有帖子上显示计算值

Question

i am working on wordpress based coupon site. I have to create a amount calculator which would work on all the individual category pages . I would be having a amount slider which would be having $ values.

Once a value is selected and on clicking the submit button, i want the percentage deals (under that respective category) to calculate a amount with respect to the $ amount selected using the slider. and then displaying it on their respective deals. I hope the idea is clear.

Till now, i have managed to, take all the posts title of the current category page into an array, and then using the preg_match feature, i have managed to extract out the '%' deal amount. Also i have created a simple slider which the user will need to input their $ amount.

<?php
$array = array();
global $post;
$category = get_the_category($post->ID);
$category = $category[0]->cat_ID;
$myposts = get_posts(array('numberposts' => 1, 'offset' => 0, 'category__in' => array($category), 'post_status'=>'publish'));
foreach($myposts as $post) :
setup_postdata($post);

$title = get_the_title();
array_push($array,$title);

 endforeach; ?> 
<?php wp_reset_query(); ?>

  <?php   

foreach($array as $str) {
if(preg_match('/(\d+)\%/i' ,$str,$m)) {
             echo $m[1],"\n"; ?>

  <input type="text" name="a" value="<?php echo $m[1]; ?>" size=5> 

<?php  }
} ?>

the above code is used to fetch all the post under the current category and extracting the % value from the respective post title. The extracted number is in '$m[1]' which i would like to pass against the respective post.

I am not able to define the respective post and passing that '%' amount and in return sending the calculated amount and saving it back to that particular post. that is, on clicking the submit button, i would want that each post having percentage value would get calculated and get displayed against that particular post. Sorry for such a huge explanation. I didnt want any detail to get missed out. Any help would be appreciated.

EDITED CODE - This code is responsible to display a single deal. I have placed the above mentioned in the sidebar file of my theme. I want to display the savings within the respective percentage deal.

    <div style="float:left; <?php if($GLOBALS['themename']['display_previewimage'] =="yes"){ ?>width:357px;<?php }else{ ?>width:477px;margin-left:10px;<?php } ?>">

     <h2 class="coupontitle">

        <a href="<?php echo $link; ?>" title="<?php the_title_attribute(); ?>" <?php if($GLOBALS['premiumpress']['analytics_tracking'] =="yes"){ ?>onclick="pageTracker._trackEvent('COUPON CLICK', 'TITLE CLICK', '<?php the_title(); ?>');"<?php } ?> <?php if(is_single()){ ?> target="_blank"<?php } ?>>

           <?php the_title(); ?>

        </a>

    </h2>

    <p><?php echo $post->post_content; ?></p> 

    <?php if($code != "" && $GLOBALS['themename']['system'] =="link"){ ?>        
    </div>

Answer 1

Ok I have created a JSFIDDLE that will give you an idea about what to do. http://jsfiddle.net/Q5sAK/1/

For this I used the jquery UI slider but this should work for your own slider you just need to call the $.each() function when you are ready.

So we know that your percentage is in the h2 tag with the class coupontitle of all of you products.

First we are going to start by modifying that h2 to have a span tag at the end that we will use to hold the computed savings:

<h2 class="coupontitle">
    <a href="<?php echo $link; ?>" title="<?php the_title_attribute(); ?>" <?php if($GLOBALS['premiumpress']['analytics_tracking'] =="yes"){ ?>onclick="pageTracker._trackEvent('COUPON CLICK', 'TITLE CLICK', '<?php the_title(); ?>');"<?php } ?> <?php if(is_single()){ ?> target="_blank"<?php } ?>>
       <?php the_title(); ?>
    </a>
    <span><span>
</h2>

Then we need to add the javascript that will calculate the savings.

function updateSlider(){
    //Get the value of the slider.
    var curentSliderAmount = $('#sliderId').val();

    //Loop over all of the titles
    $.each($('.coupontitle'),function(index,coupObj){
        //This will create the variable from the regex search that will have all of the parts for the percent we need
        var percent = $(coupObj).text().match(/(\d+)\%/i);
        //We will then take the 2nd part which is just the number without the % sign and make it a percent then multiply that by the slider value and then fix it to a 2 decimal value so it can be used a curency.
        var savings = ((percent[1]*.01) * curentSliderAmount ).toFixed(2);
        //We then set the span html content = to our newly calculated value.
        $('span',coupObj).html('Save: $'+savings);
    });
}
//Run this when the page starts
$(document).ready(function(){ updateSlider() });

Then you just need to call updateSlider() when ever the slider updates.