如何更改为 JavaScript 数组中的 URL？和for循环？

Question

当我打开模态页面时，我想创建一个指向数组中地址的链接。 但是，您可以转动循环以获取完整地址或仅获取最后一个地址。

请告诉我如何在运行 modal 1 时获取第一个地址，以及在按下 Next 按钮或第二个模式时如何获取第二个地址。

$(function(){
    const TITLE_NUM = 1;
    $(window).on('scroll.nav', function(){
        var scrollTop = $(this).scrollTop();

        if(scrollTop > $('.cp9th-gp-info').offset().top) {
            $('.cp9th-nav').addClass('fixed');
        }
        else {
            $('.cp9th-nav').removeClass('fixed');
        }
    }).trigger('scroll.nav');

    var loadImg = function(node, src, callBack) {
        if(src.length > 0) {
            var image = new Image();

            image.onload = function(){
                node.attr('src', image.src);
                callBack();
            }

            image.src = src;
        }
        else {
            callBack();
        }
    };

    var initModal = function() {
        var modal = $('.cp9th-gp-modal');
        var imgDir = '/cpn/9th/assets/img/season/modal/';
        var charaIdx = {};

        var nextMemberTable = {
            'spica': [
                'spica_01', 'spica_02'
            ],
        }

        var setCharaData = function(id) {
            var team = id.split('_')[0];
            var num = id.split('_')[1];
            var idxList = charaIdx[team];

            var imgList = [
                [
                    '.cp9th-gp-modal-chara',
                    imgDir + 'chara/' + team + '_chara_' + num + '.png',
                ],
                [
                    '.cp9th-gp-modal-text',
                    imgDir + 'text/' +  team + '_txt_' + num + '.png',
                ],
            ];

            //URL
            let textData = [
                'https://www.google.co.com/',
                'https://stackoverflow.com/',
            ]

            var imgNum = imgList.length;

            for(var i = 0; i < imgList.length; i++) {
                var node = imgList[i][0];
                var src = imgList[i][1];
                
                //The place to change.
                $('.cp9th-gp-modal-play > a').attr('href', textData[i]);

                loadImg($(node), src, function(){
                    imgNum--;

                    if(imgNum <= 0) {
                        if(modal.hasClass('on') == false) {
                            setTimeout(function(){
                                modal.addClass('on');
                            }, 100);
                        }
                    }
                });
            }

            $('.cp9th-gp-modal-team .js-modal-btn > a').attr('href', "#detail"+ num);
                $('.cp9th-gp-modal-play > a > img').attr('src', '/cpn/9th/assets/img/season/modal/btn_play_' + num +'.png');

            var idx = idxList.indexOf(id);

            var nextIdx = idx + 1;
            if(nextIdx >= idxList.length) nextIdx = 0;

            var prevIdx = idx - 1;
            if(prevIdx < 0) prevIdx = idxList.length - 1;

            $('.cp9th-gp-modal-next > a').attr('href', idxList[nextIdx]);
            $('.cp9th-gp-modal-prev > a').attr('href', idxList[prevIdx]);
            
            var nextMemberList = nextMemberTable[team];
            idx = nextMemberList.indexOf(id);

            if(idx < nextMemberList.length - 1) {
                $('.cp9th-gp-modal-btn').attr('href', nextMemberList[(idx + 1)]);
                $('.cp9th-gp-modal-btn').removeClass('off');
            }
            else {
                $('.cp9th-gp-modal-btn').addClass('off');
            }
        };

        $('.cp9th-gp-team-list ul').each(function(){
            $('a', this).each(function() {
                var id = $(this).attr('href');
                var team = id.split('_')[0];

                if(typeof charaIdx[team] == 'undefined') {
                    charaIdx[team] = [];
                }

                charaIdx[team].push(id);
            });
        });

        

        $('.cp9th-gp-modal-close, .cp9th-gp-modal-bg').on('click', function(){
            Utility.scrollLock(false);
            modal.removeClass('on');
        });

        $('.cp9th-gp-modal-btn, .cp9th-gp-modal-next > a, .cp9th-gp-modal-prev > a').on('click', function(){
            setCharaData($(this).attr('href'));
            return false;
        });

        $('.cp9th-gp-team-list ul').each(function(){
            $('a', this).each(function(i){
                $(this).data('idx', i);
            });

            $('a', this).on('click', function(){
                Utility.scrollLock(true);
                $('.cp9th-gp-modal-body .simplebar-content-wrapper').scrollTop(0);
                setCharaData($(this).attr('href'));

                return false;
            });
        });
    };

    initModal(); 
});

<ul>
                                        <li><p>sample1</p><a href="spica_01"><img src="sample.png" alt=""></a></li>
                                        <li><p>sample2</p><a href="spica_02"><img src="sample.png" alt=""></a></li>
                                    </ul>

<div class="cp9th-gp-modal">
        <div class="cp9th-gp-modal-bg"></div>
        <div class="cp9th-gp-modal-close">
            <img src="/cpn/9th/assets/img/season/modal/btn_close.png" alt="">
        </div>

        <div class="cp9th-gp-modal-body" data-simplebar>
            <dl>
                <dt>
                    <img src="" alt="" class="cp9th-gp-modal-chara">

                    <div class="cp9th-gp-modal-team">
                        <div class="js-modal-btn">
                            <a href="">
                                <img src="/cpn/9th/assets/img/season/btn_line.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="cp9th-gp-modal-prev">
                        <a href="">
                            <img src="/cpn/9th/assets/img/season/modal/btn_left.png" alt="">
                        </a>
                    </div>

                    <div class="cp9th-gp-modal-next">
                        <a href="">
                            <img src="/cpn/9th/assets/img/season/modal/btn_right.png" alt="">
                        </a>
                    </div>
                    <div class="cp9th-gp-modal-next">
                        <a href="">
                            <img src="/cpn/9th/assets/img/season/modal/btn_right.png" alt="">
                        </a>
                    </div>
                    <img class="twitter_txt" src="/cpn/9th/assets/img/season/modal/txt_tweet.png" alt="">
                    <div class="cp9th-gp-modal-twitter">
                        <a href="">
                            <img src="/cpn/9th/assets/img/season/modal/btn_tweet.png" alt="">
                        </a>
                    </div>
                    
                </dt>
                <dd>
                    <img src="" alt="" class="cp9th-gp-modal-text">
                    <div class="cp9th-gp-modal-play">
                        <a href="">
                        <img src="/cpn/9th/assets/img/season/modal/btn_play_01.png" alt="">
                        </a>
                    </div>
                </dd>
            </dl>
        </div>
    </div>

$('.cp9th-gp-modal-play > a').attr('href', textData[i]); 我想添加一个链接地址（textData）。 我不应该使用 for 循环吗？ html模态代码很长，所以我只标记了那部分。 谢谢你帮助我。

Answer 1

在以下代码块中，您将遍历您的 imgList，然后使用在相应 URL 数组 (textData) 中找到的 URL 更新锚元素 ($('.cp9th-gp-modal-play > a'))。

当您的循环遍历 imgList 时，它会不断地更改 same 锚元素，这意味着您的锚在确定之前会经历多次更改textData 数组中的最后一个 URL。

for(var i = 0; i < imgList.length; i++) {
  var node = imgList[i][0];
  var src = imgList[i][1];
                
  //The place to change.
  $('.cp9th-gp-modal-play > a').attr('href', textData[i]);

  loadImg($(node), src, function(){
    imgNum--;

    if(imgNum <= 0) {
      if(modal.hasClass('on') == false) {
        setTimeout(function(){
          modal.addClass('on');
        }, 100);
      }
    }
  });
}

请告诉我运行modal 1时如何获取第一个地址，

这里没有太多选择。如果您想将锚元素设置为第一个 URL，那么您只需使用 textData[0] 而不是 [i]：

  //The place to change.
  $('.cp9th-gp-modal-play > a').attr('href', textData[0]);

以及按下下一步按钮或第二种模式时的第二个地址。

如果您的代码中有“下一步”按钮，那么我看不到它。如果您询问如何实现“下一步”按钮，那么由于多种原因，这对于 Stack Overflow 来说是题外话。

如果“下一步”按钮已经实现，那么了解它的工作原理会很有帮助，但理论上你可以向setCharaData 传递一个额外的参数来告诉它你想查看哪个图像/链接：

var setCharaData = function(id, offset) {
  // ...

  // No more looping over imgList. Just use offset:
  var node = imgList[offset][0];
  var src = imgList[offset][1];
                
  //The place to change.
  $('.cp9th-gp-modal-play > a').attr('href', textData[offset]);

  loadImg($(node), src, function(){
    imgNum--;

    if(imgNum <= 0) {
      if(modal.hasClass('on') == false) {
        setTimeout(function(){
          modal.addClass('on');
        }, 100);
      }
    }
  });

}

然后您需要更新对setCharaData 的调用以包含新参数：

$('.cp9th-gp-modal-btn, .cp9th-gp-modal-next > a, .cp9th-gp-modal-prev > a').on('click', function(){
  setCharaData($(this).attr('href'), 0);
  return false;
});

$('.cp9th-gp-team-list ul').each(function(){
  $('a', this).each(function(i){
    $(this).data('idx', i);
  });

  $('a', this).on('click', function(){
    Utility.scrollLock(true);
    $('.cp9th-gp-modal-body .simplebar-content-wrapper').scrollTop(0);

    // Maybe keep track of your current offset here?
    setCharaData($(this).attr('href'), 0);

    return false;
  });
});