jQuery按滑块过滤

时间：2015-04-28 03:04:44

标签： javascript jquery

好吧，好像我总是来这里寻求帮助，因为我错过了一些愚蠢的事情。所以对于我的班级，我试图使用JavaScript和jQuery创建一个滑块，淡出滑块指定值以上的项目，例如，如果一个项目花费8美元，滑块设置为7，那么一切都是超过8美元的成本逐渐消失。所以这是整个页面的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Candy Bar</title>
<link href="candycss.css" rel="stylesheet" type="text/css">
<link href="range.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/aguafina-script:n4:default;alegreya:n4,i4,n7:default.js" type="text/javascript"></script>
<script src="scripts/jquery.ndd.js" type="text/javascript"></script>
<script src="scripts/dragdrop.js" type="text/javascript"></script>
<script>
        function printValue(sliderID, textbox) {
            var x = document.getElementById(textbox);
            var y = document.getElementById(sliderID);
            x.value = y.value;
        }

        window.onload = function() { printValue('slider', 'rangeValue') }
</script>
<script>
// Set price data for candy

    $('#candy1').data({ id:1, price:1 });
    $('#candy2').data({ id:2, price:2 });
    $('#candy3').data({ id:3, price:3 });
    $('#candy4').data({ id:4, price:4 });
    $('#candy5').data({ id:5, price:5 });
    $('#candy6').data({ id:6, price:6 });
    $('#candy7').data({ id:7, price:7 });
    $('#candy8').data({ id:8, price:8 });

// Link range to candy
    $(document).ready(function () {
        var theValue;

        $("#slider").change(function (){
            theValue = $('#rangeValue').val();
            filterItems(theValue);
        });
    });

    function filterItems(priceCriteria){
        $.each($('#gallery div'), function(i, item){
            $item = $(item); 
            itemData = $item.data();
            if(itemData.price <= priceCriteria){
                $item.animate({opacity: 1});
                itemData.matching = true;
            }else{
                $item.animate({opacity: 0.5});
                itemData.matching = false;
            }
        });
    }
</script>
</head>

<body>
<div id="wrapper">
  <div id="banner"> <img src="images/candybarbanner.jpg" width="800" height="140" alt="The Candy Bar Banner" id="hero"/> </div>
  <div id="content">
    <p>Here at the Candy Bar we're only interested in providing the highest quality candies. Please look at our select gourmet pieces below, select favorites or see how much you want to buy!</p>
    <article id="gallery" class="post">
      <div id="candy1" class="candy" draggable="true"><img src="images/chocolatecaramel.jpg" width="100" height="124" alt="Chocolate Caramel Bite" />
        <figcaption>Chocolate Caramel<br />
          <span class="price">$1</span></figcaption>
      </div>
      <div id="candy2" class="candy" draggable="true"><img src="images/gumdrops.jpg" width="156" height="125" alt="Gum Drops"/>
        <figcaption>Gum Drops<br />
          <span class="price">$2</span></figcaption>
      </div>
      <div id="candy3" class="candy" draggable="true"><img src="images/truffles.jpg" width="156" height="125" alt="French Truffles"/>
        <figcaption>French Truffles<br />
          <span class="price">$3</span></figcaption>
      </div>
      <div id="candy4" class="candy" draggable="true" style="clear: both"><img src="images/saltwatertaffy.jpg" width="148" height="150" alt=""/>
        <figcaption>Saltwater Taffy<br />
          <span class="price">$4</span></figcaption>
      </div>
      <div id="candy5" class="candy" draggable="true"><img src="images/Peanut-Butter-Cup.jpg" width="100" height="150" alt="Peanut Butter Cups"/>
        <figcaption>Peanut Butter Cups<br />
          <span class="price">$5</span></figcaption>
      </div>
      <div id="candy6" class="candy" draggable="true"><img src="images/cinnamonbears.jpg" width="183" height="150" alt="Cinnamon Bears"/>
        <figcaption>Cinnamon Bears<br />
          <span class="price">$6</span></figcaption>
      </div>
      <div id="candy7" class="candy" draggable="true" style="clear: both"><img src="images/toffee.jpg" width="170" height="150" alt="Toffee"/>
        <figcaption>Toffee<br />
          <span class="price">$7</span></figcaption>
      </div>
      <div id="candy8" class="candy" draggable="true"><img src="images/peanutbrittle.jpg" width="195" height="150" alt="Peanut Brittle"/>
        <figcaption>Peanut Brittle<br />
          <span class="price">$8</span></figcaption>
      </div>
    </article>
    <aside id="priceandfavorites">
      <div id="sliderdiv"> Price<br />
        <div>
          <form name="form1" method="post" action="">
            <input id="slider" type="range" min="1" max="10" step="1" value="10" onchange="printValue('slider','rangeValue')" />
            <br />
            <input id="rangeValue" type="text" size="2" />
          </form>
        </div>
      </div>
      <div id="favorites"> Favorites
        <p>Drag Favorites Here</p>
        <ul id="favs">
        </ul>
      </div>
    </aside>
  </div>
  <footer><a href="##">Home</a> | <a href="##">Contact Us</a></footer>
</div>
</body>
</html>

我特别遇到的问题是：

<script>
// Set price data for candy

    $('#candy1').data({ id:1, price:1 });
    $('#candy2').data({ id:2, price:2 });
    $('#candy3').data({ id:3, price:3 });
    $('#candy4').data({ id:4, price:4 });
    $('#candy5').data({ id:5, price:5 });
    $('#candy6').data({ id:6, price:6 });
    $('#candy7').data({ id:7, price:7 });
    $('#candy8').data({ id:8, price:8 });

// Link range to candy
    $(document).ready(function () {
        var theValue;

        $("#slider").change(function (){
            theValue = $('#rangeValue').val();
            filterItems(theValue);
        });
    });

    function filterItems(priceCriteria){
        $.each($('#gallery div'), function(i, item){
            $item = $(item); 
            itemData = $item.data();
            if(itemData.price <= priceCriteria){
                $item.animate({opacity: 1});
                itemData.matching = true;
            }else{
                $item.animate({opacity: 0.5});
                itemData.matching = false;
            }
        });
    }
</script>

和

<article id="gallery" class="post">
      <div id="candy1" class="candy" draggable="true"><img src="images/chocolatecaramel.jpg" width="100" height="124" alt="Chocolate Caramel Bite" />
        <figcaption>Chocolate Caramel<br />
          <span class="price">$1</span></figcaption>
      </div>
      <div id="candy2" class="candy" draggable="true"><img src="images/gumdrops.jpg" width="156" height="125" alt="Gum Drops"/>
        <figcaption>Gum Drops<br />
          <span class="price">$2</span></figcaption>
      </div>
      <div id="candy3" class="candy" draggable="true"><img src="images/truffles.jpg" width="156" height="125" alt="French Truffles"/>
        <figcaption>French Truffles<br />
          <span class="price">$3</span></figcaption>
      </div>
      <div id="candy4" class="candy" draggable="true" style="clear: both"><img src="images/saltwatertaffy.jpg" width="148" height="150" alt=""/>
        <figcaption>Saltwater Taffy<br />
          <span class="price">$4</span></figcaption>
      </div>
      <div id="candy5" class="candy" draggable="true"><img src="images/Peanut-Butter-Cup.jpg" width="100" height="150" alt="Peanut Butter Cups"/>
        <figcaption>Peanut Butter Cups<br />
          <span class="price">$5</span></figcaption>
      </div>
      <div id="candy6" class="candy" draggable="true"><img src="images/cinnamonbears.jpg" width="183" height="150" alt="Cinnamon Bears"/>
        <figcaption>Cinnamon Bears<br />
          <span class="price">$6</span></figcaption>
      </div>
      <div id="candy7" class="candy" draggable="true" style="clear: both"><img src="images/toffee.jpg" width="170" height="150" alt="Toffee"/>
        <figcaption>Toffee<br />
          <span class="price">$7</span></figcaption>
      </div>
      <div id="candy8" class="candy" draggable="true"><img src="images/peanutbrittle.jpg" width="195" height="150" alt="Peanut Brittle"/>
        <figcaption>Peanut Brittle<br />
          <span class="price">$8</span></figcaption>
      </div>
    </article>

对我可能遗失的任何帮助都将非常感激。谢谢

编辑：

正如所建议的那样，我尝试将数据部分移动到函数的其余部分，如下所示：

<script>
    $(document).ready(function () {
        var theValue;

            $('#candy1').data({ id:1, price:1 });
            $('#candy2').data({ id:2, price:2 });
            $('#candy3').data({ id:3, price:3 });
            $('#candy4').data({ id:4, price:4 });
            $('#candy5').data({ id:5, price:5 });
            $('#candy6').data({ id:6, price:6 });
            $('#candy7').data({ id:7, price:7 });
            $('#candy8').data({ id:8, price:8 });

        $("#slider").change(function (){
            theValue = $('#rangeValue').val();
            filterItems(theValue);
        });
    });

    function filterItems(priceCriteria){
        $.each($('#gallery div'), function(i, item){
            $item = $(item); 
            itemData = $item.data();
            if(itemData.price <= priceCriteria){
                $item.animate({opacity: 1});
                itemData.matching = true;
            }else{
                $item.animate({opacity: 0.5});
                itemData.matching = false;
            }
        });
    }
</script>

不幸的是，它似乎无法解决任何问题。

编辑2：

我打开了Google的开发人员工具，它告诉我$未定义，我是否忘记在某处注意某些内容以便知道它正在处理jQuery？

编辑3：

我认为这样的东西是愚蠢的，修复了它。非常感谢你的帮助。

0 个答案:

没有答案
相关问题
最新问题