Javascript滑块不显示数组?

时间:2016-01-16 02:47:17

标签: javascript html css

这是我正在处理的页面的链接:

https://www.servicerr.com/partners.php

每当您点击不同的数字时,它应该更新滑块下方的价格。这个javascript文件包含这些价格:

https://www.servicerr.com/js/set_my_price.js

我无法弄清楚为什么价格不会改变,为什么当你点击其中一个时,每个数字都会突出显示。

大约一年前,我有这个工作正常,然后不得不重新创建它。只是无法弄清楚这次我做错了什么。任何帮助将不胜感激。

以下链接指向其他两个文件的Javascript文件:

以下是使用的HTML代码:

  <div class="product2" style="margin-right:2%">
    <div class="title">STARTER</div>
    <div class="monthly">PARTNER DISCOUNT</div>
    <ul>
    <div class="servicerr-pricing-packet starter"><span class="original"><span style="font-weight: bold; border-bottom: 0px none; color: rgb(0, 125, 199); font-size: 70px; white-space:nowrap;margin:0 !important;">$34.96</span></span></div>
    <p style="font-size:20px;color:#000;margin-top:20px;border:0;padding:5px 0 0 !important;">website / monthly</p>
    </ul>
    <div class="order"><a href="https://www.servicerr.com/contact.php" style="font-size: 25px;" class="btn btngreen">Become A Partner</a></div>
  </div>
  <div class="product" style="margin-right:2%">
    <div class="title">SPECIALIZED</div>
    <div class="monthly">PARTNER DISCOUNT</div>
    <ul>
    <div class="servicerr-pricing-packet specialized"><span class="original"><span style="font-weight: bold; border-bottom: 0px none; color: rgb(0, 125, 199); font-size: 70px; white-space:nowrap;margin:0 !important;">$69.96</span></span></div>
    <p style="font-size:20px;color:#000;margin-top:20px;border:0;padding:5px 0 0 !important;">website / monthly</p>
    </ul>
    <div class="order"><a href="https://www.servicerr.com/contact.php" style="font-size: 25px;" class="btn btngreen">Become A Partner</a></div>
  </div>
  <div class="product2">
    <div class="title">BUSINESS</div>
    <div class="monthly">PARTNER DISCOUNT</div>
    <ul>
    <div class="servicerr-pricing-packet business"><span class="original"><span style="font-weight: bold; border-bottom: 0px none; color: rgb(0, 125, 199); font-size: 70px; white-space:nowrap;margin:0 !important;">$174.96</span></span></div>
    <p style="font-size:20px;color:#000;margin-top:20px;border:0;padding:5px 0 0 !important;">website / monthly</p>
    </ul>
    <div class="order"><a href="https://www.servicerr.com/contact.php" style="font-size: 25px;" class="btn btngreen">Become A Partner</a></div>
  </div>

以下是set_my_price.js代码:

var set_default_value_here = 25;
$(document).ready(function(){

$("."+set_default_value_here).css('color', '#ffbb50');

});

function get_array(val){
                    var one = new Array(1, '49.95', '99.95', '249.95');
                    var two = new Array(5, '39.96', '79.96', '199.96');
                    var three = new Array(10, '37.46', '74.96', '187.46');
                    var four = new Array(25, '34.96', '69.96', '174.96');
                    var five = new Array(50, '32.47', '64.97', '162.47');
                    var six = new Array(75, '29.97', '59.97', '149.97');
                    var seven = new Array(100, '27.47', '54.97', '137.47');
                    var eight = new Array(200, '24.97', '49.97', '124.97');
                    var nine = new Array(300, '22.48', '44.98', '112.48');
                    var ten = new Array(400, '19.98', '39.98', '99.98');
                    var eleven = new Array(500, '17.48', '34.98', '87.48');
                    var twelve = new Array(600, '14.98', '29.98', '74.98');
                    var thirteen = new Array(700, '12.49', '24.99', '62.49');
                    var fourteen = new Array(800, '9.99', '19.99', '49.99');
                    var fifteen = new Array(900, '7.49', '14.99', '37.49');
                    var sixteen = new Array(1000, '4.99', '9.99', '24.99');


                    if(val == 1){return one;}
                    if(val == 2){return two;}
                    if(val == 3){return three;}
                    if(val == 4){return four;}
                    if(val == 5){return five;}
                    if(val == 6){return six;}
                    if(val == 7){return seven;}
                    if(val == 8){return eight;}
                    if(val == 9){return nine;}
                    if(val == 10){return ten;}
                    if(val == 11){return eleven;}
                    if(val == 12){return twelve;}
                    if(val == 13){return thirteen;}
                    if(val == 14){return fourteen;}
                    if(val == 15){return fifteen;}
                    if(val == 16){return sixteen;}


                }

pricing文件:

$(document).ready(function(){
var sliderUpdate = "";
    if ($('#servicerr-pricing-slider').length > 0) {

        var slider = null;

        if ($.fn.bootstrapSlider) {
            slider = $('#servicerr-pricing-slider').bootstrapSlider();
        } else {
            slider = $('#servicerr-pricing-slider').slider();
        }

        slider.on('slide', sliderUpdate);
        slider.on('slideStop', sliderUpdate);
    }

});

我也在使用原始版本bootstrap-slider.js的修改版本,该版本太长而无法在此处发布,但可以直接查看:https://www.servicerr.com/js/bootstrap-slider.js

谢谢!

1 个答案:

答案 0 :(得分:0)

看起来有人一直在搞乱原始代码:

/**/
var old_no = get_array( document.getElementById('servicerr-pricing-slider').value) ;
$(".color_less").css('color', '#08619f');

var no = get_array(a);

$("."+no[0]).css('color', '#ffbb50'); //alert(no[0]);
$("#starter").html("$"+no[1]);
$("#specialized").html("$"+no[2]);
$("#business").html("$"+no[3]);
/**/

为什么它会突出显示:

$(".color_less")不匹配任何元素,此类中没有任何元素。

您可以添加课程或将其更改为$("#servicerr-pricing-slider-nums span")

为什么价格不会发生变化:

$("#specialized")正在寻找具有此id的元素,您已将其指定为元素上的类。将两者都更改为class或id,以便匹配。当然最好是id。