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

我在基于wordpress的优惠券网站上工作。我必须创建一个金额计算器，它将在所有单独的类别页面上工作。我将有一个金额滑块，它将有$value

一旦选择了一个值并单击submit按钮，我希望percentage deals（在相应的类别下）计算使用滑块选择的$amount的金额。然后在他们各自的交易中展示。 我希望这个想法是清楚的

到目前为止，我已经成功地将当前类别页面的所有帖子标题放入一个数组中，然后使用preg_match功能提取出“%”交易金额。 此外，我还创建了一个简单的滑块，用户需要输入他们的美元金额

<?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  }
} ?>

好的，我已经创建了一个JSFIDLE，它将让您知道该做什么

为此，我使用了jquery UI滑块，但这应该适用于您自己的滑块，您只需在准备就绪时调用$.each（）函数即可

因此，我们知道您的百分比在h2标记中，并且所有产品的类别都是coupontitle

首先，我们将修改h2，使其在末尾有一个span标记，用于保存计算出的节省：

<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>

然后，只要在滑块更新时调用updateSlider（）。
不清楚您要查找什么。纠正我，如果我错了，但你有一个类别索引页，列出文章。在那些帖子中，标题是一个百分比。在分类索引页面上有一个代表美元金额的滑块。这就是我感到困惑的地方，一个用户将滑块滑动到一美元金额点击提交，您希望发生什么？嗨，Chausser，在用户选择金额并点击提交按钮后，我希望收集每个帖子中的所有%交易，并计算用户输入的w.r.t金额（滑块）然后根据相应的帖子显示该金额。例如：帖子1%是10%帖子2%是25%用户滑动滑块指示$100，您希望帖子1显示save$10帖子2显示save$25？是的。现在我可以从1号帖子中获取“10”，从2号帖子中获取“25”。但是我无法分别计算“$10”和“$25”的值，并将其传递给post 1和post 2。你能将代码发布到post包装器中，并将节省下来的钱放到哪里，我会给它一个快照谢谢你，Chausser。该代码适用于所有百分比交易。现在我想为“$”交易和不包含任何金额的交易建立一个条件。任何百分比金额？因此，没有储蓄百分比的帖子只显示输入值？这意味着，交易中没有25%或任何金额。有些交易有“20美元”折扣，有些交易没有任何数字。此外，给定的代码仅适用于第一笔交易，可能是因为其他交易没有%折扣。我为所有$off交易和航运交易添加了多个条件，效果良好。我试图使用提交按钮来分离输入和输出。表示我想滑动滑块并选择一个数量。点击提交按钮，我希望所有的计算都能进行并显示结果。在这种情况下，我建议您使用wordpress自定义字段选项，设置为储蓄类型和储蓄金额，然后使用“数据-”属性，以确定该帖子有哪些类型的节省，然后计算并显示。
<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>

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