Shopify主题开发- jQuery找不到兄弟子元素

Question

我试图交换一个兄弟锚的悬停图像扩展，以添加一个动画在悬停的链接。我似乎无法收集正确的元素来交换替换图像扩展类型。

​

$(document).ready(function(){

    var categoryLinks = $('.category-link');

    if ( categoryLinks.length ) {

        categoryLinks.each(function(){

            var categoryIcon = $(this).siblings('.a-category-icon').children('.category-icon');

            $(this).hover(function() {

                src = categoryIcon.src.replace('.png','.gif' );
                console.log(src);
                categoryIcon.attr('src', src);
                console.log(categoryIcon.src);

            }, function() {

                src = categoryIcon.src.replace('.gif','.png' );
                console.log(src);
                categoryIcon.attr('src', src);
                console.log(categoryIcon.src);

            });
        });
    }
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-inner">

    <div class="categories-container">
        <h3 class="categories-title">Know what you’re looking for?</h3>
    </div>

    <div class="a-category">
        <a class="category-link box-link" href="/"></a>

        <div class="a-category-icon">
            <img class="category-icon" alt="Category Icon" src="//cdn.shopify.com/s/files/1/0043/0886/0977/files/Molecule.png?v=1565789686">
        </div>
        <div class="a-category-content">
            <div class="category-title">
                Chemicals &amp; Standards
            </div>
        </div>
    </div>

    <div class="a-category">
        <a class="category-link box-link" href="/"></a>

        <div class="a-category-icon">
            <img class="category-icon" alt="Category Icon" src="//cdn.shopify.com/s/files/1/0043/0886/0977/files/Lab.png?v=1565789686">
        </div>
        <div class="a-category-content">
            <div class="category-title">
                Lab Consumables &amp; Supplies
            </div>
        </div>
    </div>

    <div class="a-category">
        <a class="category-link box-link" href="/"></a>

        <div class="a-category-icon">
            <img class="category-icon" alt="Category Icon" src="//cdn.shopify.com/s/files/1/0043/0886/0977/files/Equipment.png?v=1565789686">
        </div>
        <div class="a-category-content">
            <div class="category-title">
                Equipment &amp; Instruments
            </div>
        </div>
    </div>

    <div class="a-category">
        <a class="category-link box-link" href="/"></a>

        <div class="a-category-icon">
            <img class="category-icon" alt="Category Icon" src="//cdn.shopify.com/s/files/1/0043/0886/0977/files/Materials.png?v=1565789686">
        </div>
        <div class="a-category-content">
            <div class="category-title">
                Research &amp; Development Materials
            </div>
        </div>
    </div>

    <div class="a-category">
        <a class="category-link box-link" href="/"></a>

        <div class="a-category-icon">
            <img class="category-icon" alt="Category Icon" src="//cdn.shopify.com/s/files/1/0043/0886/0977/files/Custom.png?v=1565789686">
        </div>
        <div class="a-category-content">
            <div class="category-title">
                Custom Products &amp; Services
            </div>
        </div>
    </div>
</div>

​

悬停错误：

Uncaught TypeError: Cannot read property 'replace' of undefined

at HTMLAnchorElement.<anonymous> (scripts.js?703:23)

at HTMLAnchorElement.handle (jquery-v3-4-1.js?703:2)

at HTMLAnchorElement.dispatch (jquery-v3-4-1.js?703:2)

at HTMLAnchorElement.v.handle (jquery-v3-4-1.js?703:2)

悬停结束时出错：

Uncaught TypeError: Cannot read property 'replace' of undefined

at HTMLAnchorElement.<anonymous> (scripts.js?703:30)

at HTMLAnchorElement.handle (jquery-v3-4-1.js?703:2)

at HTMLAnchorElement.dispatch (jquery-v3-4-1.js?703:2)

at HTMLAnchorElement.v.handle (jquery-v3-4-1.js?703:2)

如果错误指的是行：

src = categoryIcon.src.replace('.png','.gif' );

和：

src = categoryIcon.src.replace('.gif','.png' );

这个错误的根源是什么？

Answer 1

​

$(document).ready(function(){
  // get all the category links
  var categoryLinks = $('.category-link');
  // category links exists?
  if (categoryLinks.length) {
    // loop through every category link
    categoryLinks.each(function(){
      // "cache" the current link object
      var link = $(this);
      // get the siblings' category icon
      var categoryIcon = link.siblings('.a-category-icon').children('.category-icon');
      
      // on hover of the current link
      link.hover(function() {
        // get the src property of the category icon and replace .png with .gif
        var src = categoryIcon.prop('src').replace('.png','.gif' );
        // set src property of the category icon
        categoryIcon.prop('src', src);
      }, function() {
        // get the src property of the category icon and replace .gif with .png
        var src = categoryIcon.prop('src').replace('.gif','.png' );
        // set src property of the category icon
        categoryIcon.prop('src', src);
      });
    });
  }
});

.a-category {
  position: relative;
}
a.category-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-inner">

    <div class="categories-container">
        <h3 class="categories-title">Know what you’re looking for?</h3>
    </div>

    <div class="a-category">
        <a class="category-link box-link" href="/"></a>

        <div class="a-category-icon">
            <img class="category-icon" alt="Category Icon" src="//cdn.shopify.com/s/files/1/0043/0886/0977/files/Molecule.png?v=1565789686">
        </div>
        <div class="a-category-content">
            <div class="category-title">
                Chemicals &amp; Standards
            </div>
        </div>
    </div>

    <div class="a-category">
        <a class="category-link box-link" href="/"></a>

        <div class="a-category-icon">
            <img class="category-icon" alt="Category Icon" src="//cdn.shopify.com/s/files/1/0043/0886/0977/files/Lab.png?v=1565789686">
        </div>
        <div class="a-category-content">
            <div class="category-title">
                Lab Consumables &amp; Supplies
            </div>
        </div>
    </div>

    <div class="a-category">
        <a class="category-link box-link" href="/"></a>

        <div class="a-category-icon">
            <img class="category-icon" alt="Category Icon" src="//cdn.shopify.com/s/files/1/0043/0886/0977/files/Equipment.png?v=1565789686">
        </div>
        <div class="a-category-content">
            <div class="category-title">
                Equipment &amp; Instruments
            </div>
        </div>
    </div>

    <div class="a-category">
        <a class="category-link box-link" href="/"></a>

        <div class="a-category-icon">
            <img class="category-icon" alt="Category Icon" src="//cdn.shopify.com/s/files/1/0043/0886/0977/files/Materials.png?v=1565789686">
        </div>
        <div class="a-category-content">
            <div class="category-title">
                Research &amp; Development Materials
            </div>
        </div>
    </div>

    <div class="a-category">
        <a class="category-link box-link" href="/"></a>

        <div class="a-category-icon">
            <img class="category-icon" alt="Category Icon" src="//cdn.shopify.com/s/files/1/0043/0886/0977/files/Custom.png?v=1565789686">
        </div>
        <div class="a-category-content">
            <div class="category-title">
                Custom Products &amp; Services
            </div>
        </div>
    </div>
</div>

​