Shopify 主题开发 - jQuery 无法找到兄弟元素

Question

我正在尝试在悬停同级锚点时交换图像扩展名，以便在 link 悬停时添加动画。我似乎无法收集到正确的元素来交换替换图片扩展类型。

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

Shopify 主题开发 - jQuery 无法找到兄弟元素

Shopify Theme Development - jQuery unable to find sibling child element

jquery

replace

children

siblings