Jquery, url stays the same in a each function on <a> e

Jquery, url stays the same in a each function on <a> element (UserScript)

本文关键字：lt url gt on function same the in Jquery each stays      更新时间：2023-09-26

所以我遇到了这个问题，我无法从用户脚本中使用ajax获取页面的html代码，因为页面首先只加载页面的一部分，然后再加载其他内容，所以从用户脚本执行ajax来获取整个页面的html是不可能的。所以我用了一个看不见的i框架来绕过这个问题。而且效果很好。但我的url总是保持不变，我不知道为什么，我正在对一些<a>元素执行.each()函数，但出现了问题。

我想做的是使用放大弹出库并在弹出窗口中打开图像。基本上，这一部分是有效的，但图像的url不会改变，所以无论我点击什么图像，它都是相同的图像。

这是我的代码

var link = '';
var link2 = '';
var iFrame = $('<iframe id="tempData" style ="display: none">').appendTo('body');
$("head").append('<link rel="stylesheet" href = "https://49535f300cc62ae84be0bc4341ad834057099639.googledrive.com/host/0B7xSofmydrHqMU9pRDJXTEtpQWc">');
     $(document).ready(function() {
         $('section[class="article"]').find("#intelliTXT").find('a').each(function(){ 
            var that = $(this);
             if (that.find('img').attr('src') != undefined){
                 iFrame.attr('src',that.attr('href'));
                 iFrame.load(function(){
                     link = iFrame.contents().find('.big').find('img').attr('src');
                     that.magnificPopup({
                         items: {
                             src: link
                         },
                         type: 'image',
                         closeOnContentClick: true,
                         mainClass: 'mfp-img-mobile',
                         image: {
                             verticalFit: true
                         }
                     });
                 });
             }
         });
     });

不知何故，link变量在我点击的每个图像上都保持不变。我不知道为什么。请帮忙吗？

link2是主页上的url，我必须访问该url才能找到要在弹出窗口中显示的实际图像。link是必须在弹出窗口中显示的图像的url。这也是始终保持不变的联系。它总是页面的最后一个图像。

我制作并提醒检查link2变量是否发生了变化，因此每次加载iframe时我都应该得到一个新的链接，但在amplificPopup函数中，链接始终保持相同的

HTML

<a href="/image/senran-kagura-estival-versus-2015-07-13-15-005-811425-264284" title="Senran Kagura Estival Versus 2015 07 13 15 005" class="zoomLink"><img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_00CE007400811425.jpg" alt="Senran Kagura Estival Versus 2015 07 13 15 005" width="206" height="116"></a>

这在主页上，还有其他链接。中的img只是一个屏幕截图。中的href是指向实际大尺寸图像所在的第二页的链接。

<section id="zoom" class="galerie">
                    <nav class="smalls clearfix">
                                    <a href="/image/senran-kagura-estival-versus-2015-07-13-15-001-811421-264284" class="small">
                        <img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-001_00DC007C00811421.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_001">
                    </a>
                                    <a href="/image/senran-kagura-estival-versus-2015-07-13-15-007-811427-264284" class="small">
                        <img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-007_00DC007C00811427.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_007">
                    </a>
                                <a href="/image/senran-kagura-estival-versus-2015-07-13-15-005-811425-264284" class="small active">
                    <img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_00DC007C00811425.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_005">
                </a>
                                    <a href="/image/senran-kagura-estival-versus-2015-07-13-15-004-811424-264284" class="small">
                        <img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-004_00DC007C00811424.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_004">
                    </a>
                                    <a href="/image/senran-kagura-estival-versus-2015-07-13-15-003-811423-264284" class="small">
                        <img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-003_00DC007C00811423.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_003">
                    </a>
                            </nav>
        
        <div class="zoom">
                        <span class="big"><img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_0903D4000000811425.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_005"></span>
                                                <a href="/image/senran-kagura-estival-versus-2015-07-13-15-007-811427-264284" class="nav prev" data-icon=""></a>
                                                    <a href="/image/senran-kagura-estival-versus-2015-07-13-15-004-811424-264284" class="nav next" data-icon=""></a>
                            
            <header>
                <h1 class="titre">Senran-Kagura-Estival-Versus_2015_07-13-15_005</h1>
            </header>
        </div>
                    <div class="bup">    <script type="text/javascript">tmntag.adTag('side_ad');</script>
</div>
        
        <a class="btn" data-icon="" href="/actualites/senran-kagura-estival-versus-premieres-images-ayame-combattante-264284-1">Retour au contenu</a>
    </section>

这在第二页。big class里面的图片是我在主页上点击的图片，它有真实的大小。big类的img元素中的链接是我必须使用的链接。所有其他图像都只是一些其他图像的小屏幕截图，我不必使用它们。

解决方案

好吧，最后我设法使它工作，只是为每个链接创建一个不同的iframe。

var iFrameContainer = $('<div id="iFrameContainer" style = "display: none">').appendTo('body');

然后在每个函数中添加一个新的iframe

 var iFrame = $('<iFrame>').appendTo(iFrameContainer);

link = iFrame.contents().find('.big').find('img').attr('src');

看起来您正在向每个迭代链接添加相同的url。尝试对图像进行迭代。

您可以尝试加载

 iFrame.on('load', function() {
       iFrame.load(function(){
                 link = iFrame.contents().find('.big').find('img').attr('src');
                 that.magnificPopup({
                     items: {
                         src: link
                     },
                     type: 'image',
                     closeOnContentClick: true,
                     mainClass: 'mfp-img-mobile',
                     image: {
                         verticalFit: true
                     }
                 });
             });
          });
相关文章：