JavaScript到JQuery，转换排序库

我需要从JavaScriptJQuery转换这个工作过滤器库。我对这两种语言都是个新手，所以我希望有人能给我一点帮助。以下是必须转换的JavaScript，

(function() {
var filterButtons = document.querySelectorAll(".filterList a");
imageNodes = document.querySelectorAll("img");
console.log(filterButtons, imageNodes);
function staggerImage() {
    TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
function doImageSwitch(event) {
    console.log("fire");
    console.log(event.target.parentNode.id);
    for(i=0; i<imageNodes.length; i++) {
            imageNodes[i].style.display = "inline";
        if(!imageNodes[i].classList.contains(event.target.parentNode.id)) {
            imageNodes[i].style.display = "none";
        }
    }
    staggerImage();
}
[].forEach.call(filterButtons, function(el) {
    el.addEventListener("click", doImageSwitch, false);
});
staggerImage();
})();

这是我设置的HTML代码，

<?php 
include './includes/functions.php';
$conn = connect($config);
$result = mysqli_query($conn, "SELECT * FROM main_content");
//echo mysqli_num_rows($result); ?>
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Filter Gallery</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
  </head>
  <body>
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Something</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>
  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="has-dropdown">
        <a href="#">Right Button with Dropdown</a>
        <ul class="dropdown filterList">
          <li id="flower"><a href="#">Flower </a></li>
          <li id="puppy" ><a href="#">Puppy  </a></li>
          <li id="kitten" ><a href="#">Kitty  </a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>
<div class="row">
    <div class="small-12 columns text-center">
        <div class="images">
            <?php
                while($row = $result -> fetch_assoc()) {
                    echo "<img class="{$row['img_class']} 
                           img-responsive" src="img/{$row['img_src']}" 
                           alt="{$row['img_alt']}">";
                }
            ?>
        </div>
    </div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>
<script src="js/myScript.js"></script>
  </body>
</html>

如有任何帮助，我们将不胜感激。非常感谢。

javascript代码是您自己写的吗？如果是这样的话，找到答案应该不是问题。StackOverflow并不是一个编码服务。我可以试着帮你，但如果是家庭作业或编程工作，我不会在这个问题上浪费时间；）

如果你第一次尝试转换代码，我会很乐意帮助你（尝试）。

下面使用的html结构可能与php echo输出相同。

(function() {
 
// Selecting all of the img tags within the document that have to be changed
var imageNodes = $(".images img");
 
// TweenMax syntax stays the same
function staggerImage() {
  TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
 
$(".filterList a").on("click", function(e) {
        console.log("fire");
 
        // parent() - http://api.jquery.com/parent/
        //console.log('This: %o - Parent - %o - ParentId - %o',  $(this),  $(this).parent(),  $(this).parent().attr("id"));        
        var parentId = $(this).parent().attr("id");
        // [parentId] will be used as a scoped variable on the nested anonymous function declared in [.each] below.
 
        // .each([array],func) | [array].each(func) - http://api.jquery.com/jquery.each/
        $(imageNodes).each(function(index, value) {
            console.log("index: %o | value: %o | parentId: %o", index, value, parentId);
 
                // .hasClass([string]) - http://api.jquery.com/hasclass/
                if($(value).hasClass(parentId))
                {
                        $(value).css("display","inline");
                } else {
                        $(value).css("display","none");
                }
        });
   
    staggerImage();
});
 
staggerImage();
 
})();

img {width:5em; height:5em;border:0.1em solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Something</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>
  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="has-dropdown">
        <a href="#">Right Button with Dropdown</a>
        <ul class="dropdown filterList">
          <li id="flower"><a href="#">Flower </a></li>
          <li id="puppy" ><a href="#">Puppy  </a></li>
          <li id="kitten" ><a href="#">Kitty  </a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>
<div class="row">
    <div class="small-12 columns text-center">
        <div class="images">
            <img class="flower img-responsive" src="img/test.png" alt="flower 1" />
            <img class="flower img-responsive" src="img/test.png" alt="flower 2" />
            <img class="puppy img-responsive" src="img/test.png" alt="puppy 1" />
            <img class="flower img-responsive" src="img/test.png" alt="flower 3" />
            <img class="kitten img-responsive" src="img/test.png" alt="kitten 1" />
            <img class="puppy img-responsive" src="img/test.png" alt="puppy 3" />
        </div>
    </div>
</div>

jsFiddle：http://jsfiddle.net/1m4LmLhx/1/

pastebin：http://pastebin.com/bfDL5NLU

注意：当您单击我们附加了单击事件处理程序的超链接时，视口将被定向回页面顶部。。这通常是不可取的，但解决这种行为似乎超出了这个问题的范围。

jsFiddle：http://jsfiddle.net/1m4LmLhx/1/

pastebin：http://pastebin.com/bfDL5NLU

相关内容

最新更新

热门标签：