在Javascript或JQuery中需要一个奇特的循环

Question

这是我在这里的第一篇文章，尽管我已经使用这个网站多年来帮助我找到代码片段来实现我需要的结果。因此，如果我没有正确地发布这篇文章，请提前原谅我…

我的页面上有一个iframe，它从ancestry.com加载一组图像中的第一个：

    <div id="ancestryiframeholder">
    <div class="well padding larger" align="center">Some Districts, like in cities and towns have more than one Sub-district included in the table. The program only automatically loads the first Sub-district from the set.<br />You will have to use Ancestry's menu below this message to choose the subsequent Sub-district(s). See the Sub-district list for more information.
    <iframe id="iframe" class="" src="http://interactive.ancestry.com/8991/1921_041-E002904764/8517860#?imageId=1921_043-e002907748" style="height:300px; width:100%;"></iframe>
    </div>
    </div>

我还有一个列表中的一组链接，根据特定页面的地名，不同页面的链接长度不同。

    <ul><br /><br />
    <li><a id="fergusonscove" href="/census/novascotia/test/fergusonscove.html" rel="#iframe">Ferguson's Cove</a></li>
    <li><a id="herringcove" href="/census/novascotia/test/herringcove.html" rel="#iframe">Herring Cove</a></li>
    <li><a id="portugeusecove" href="/census/novascotia/test/portugeusecove.html" rel="#iframe">Portugeuse Cove</a></li>
    </ul>

这个列表可能会很长，这取决于有多少地方。当用户单击其中一个链接时，会发生两件事。使用rel iframe将来自我的服务器的文档加载到div中。并且，一个来自祖先的新图像被加载到我上面提到的带有id iframe的前面的iframe中。我使用这里的脚本- http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm -来完成将文档加载到iframe。然后，我使用下面的代码将新图像从祖先加载到另一个iframe中。所有操作都如预期的那样工作。无需刷新页面即可将新图像加载到iframe中。

    <script>
    $(document).ready(function () {
    var addEvent = (function(){return window.addEventListener? function(el, ev, f){
        el.addEventListener(ev, f, false);
    }:window.attachEvent? function(el, ev, f){
        el.attachEvent('on' + ev, f);
    }:function(){return;};
})();
var removeEvent = (function(){return window.addEventListener? function(el, ev, f){
        el.removeEventListener(ev, f, false);
    }:window.attachEvent? function(el, ev, f){
        el.detachEvent('on' + ev, f);
    }:function(){return;};
})();

    var iframe = document.getElementById('iframe'),
        fergusonscove = document.getElementById('fergusonscove');
        herringcove = document.getElementById('herringcove');
        portugeusecove = document.getElementById('portugeusecove');
        halifaxward01 = document.getElementById('halifaxward01');


    function changeframe(){
        var iDoc = (iframe.contentWindow || iframe.contentDocument || null);
    removeEvent(iframe, 'load', changeframe);
    }
    addEvent(fergusonscove, 'click', function () {
        addEvent(iframe, 'load', changeframe);
        iframe.src = 'http://interactive.ancestry.com/8991/1921_041-E002904764/8517860#?imageId=1921_043-e002907748';
        });

        addEvent(herringcove, 'click', function () {
        addEvent(iframe, 'load', changeframe);
        iframe.src = 'http://interactive.ancestry.com/8991/1921_041-E002904764/8517860#?imageId=1921_043-e002907755';
    });

    addEvent(portugeusecove, 'click', function () {
        addEvent(iframe, 'load', changeframe);
        iframe.src = 'http://interactive.ancestry.com/8991/1921_041-E002904764/8517860#?imageId=1921_043-e002907762';
    });

        addEvent(halifaxward01, 'click', function () {
        addEvent(iframe, 'load', changeframe);
        iframe.src = 'http://interactive.ancestry.com/8991/1921_041-E002904764/8517860#?imageId=1921_043-e002908373';
    });

}); 
</script>

如你所见，这部分的所有工作我都是手动完成的。按照现在的情况，我将不得不为每个地名手工输入所有这些内容。而且将会有成千上万个这样的人。

     var iframe = document.getElementById('iframe'),
        fergusonscove = document.getElementById('fergusonscove');
        herringcove = document.getElementById('herringcove');
        portugeusecove = document.getElementById('portugeusecove');
        halifaxward01 = document.getElementById('halifaxward01');

等。等。然后，为了获得新的祖先图像，我必须再次手动输入每个位置。

    function changeframe(){
        var iDoc = (iframe.contentWindow || iframe.contentDocument || null);
    removeEvent(iframe, 'load', changeframe);
    }
    addEvent(fergusonscove, 'click', function () {
        addEvent(iframe, 'load', changeframe);
        iframe.src = 'http://interactive.ancestry.com/8991/1921_041-E002904764/8517860#?imageId=1921_043-e002907748';
        });

        addEvent(herringcove, 'click', function () {
        addEvent(iframe, 'load', changeframe);
        iframe.src = 'http://interactive.ancestry.com/8991/1921_041-E002904764/8517860#?imageId=1921_043-e002907755';
    });

等。等。有没有一种方法可以在一定程度上自动化这一点，以减少体力劳动？提前感谢您的帮助。

Answer 1

基本上，您需要一个for循环。

您应该将一个项目的代码组合到一个函数中，然后再给出参数。

诀窍是拿出其中的两个例子，找出每个例子的不同之处。每一个改变的东西都需要一个参数。

让我们看一个简单的例子：

var users = ['Alice', 'Bob', 'Charlie'];
console.log('Hello, %s!', users[0]);
console.log('Hello, %s!', users[1]);
console.log('Hello, %s!', users[2]);

这将打印以下内容：

你好，

！

你好，鲍勃！

你好，查莉！

..。但我们必须编写三个console.log语句。如果有成千上万的用户，那就没什么意思了。让我们试着让这段代码更通用。首先，我们创建一个函数：

function greet() {
    console.log('Hello, %s!', users[0]);
}

我们已经完成了一半，但这将始终打印Alice的问候语，因为users[0]部分是硬编码的。这是我们需要用参数替换的部分：

function greet(name) {
    console.log('Hello, %s!', name);
}

现在，我们可以简单地循环遍历我们的用户，以问候所有的用户，无论他们有多少：

for (var i=0; i<users.length; i++) {
    greet(users[i]);
}

我知道这不是一个复制粘贴的答案，但如果你应用这些原则和一些耐心，你应该能够做到这一点。

祝好运!

Answer 2

我的强迫症就是我的失败。一定要远离溢流！这将是一种更清晰的方式来处理您的需求。在JS中，ancestoryService()是init fn。添加额外的对象服务属性很容易。

备注：

• 我使用的是Angular JS，它对于JS OOP来说非常棒。有一个陡峭的学习曲线，但创造了伟大的代码。React也很出色，DOM解析的

• btw看看JS DOM element API。我广泛地使用它。例如，您可以构建一个观察者服务，它将监视祖先DOM以自动更新。您还可以添加/提取有意义的DOM信息。

工作沙箱

https://jsfiddle.net/nb3gmdkL/

HTML示例

    <body>
      <h1>Ancetory</h1>
      <div id="Bob" src="http://www.bob.com"></div>
      <div id="Jack" src="http://www.jack.com"></div>
      <div id="Fred" src="http://www.fred.com"></div>
      <div id="Kate"src="http://www.kate.com"></div>
      <div id="Bob"src="http://www.bob.com"></div>
    </body>

代码

 (function() {

    function ImageService() {
      var model = this,
      item = {};

      model.setInstance = function(instance) {
         item['id'] = instance['id'] ? instance['id'] : null;
         item['url'] = instance.getAttribute("src") ? instance.getAttribute("src") : null;
      }

      model.getInstance = function(instance) {
         return item;
      }

      model.getId = function() {
         return item['id'];
      }

        model.getUrl = function() {
         return item['url'];
      }

      return {
        setInstance: function(instance) {
          model.setInstance(instance);
        },
        getInstance: function() {
          return model.getInstance();
        },
        getId: function() {
          return model.getInstance();
        },
      }
    }

    function ImageCollection() {
      var collection = this,
          store = [];

      collection.add = function(instance) {
                if (instance) {
             store.push(instance);
            } else {
            console.log('Oops, conatins', instance)
          }
      }

      collection.contains = function(instance) {
        if (store) {
          return undefined !== _.find(store, function(item, k) {
            return item.getId() == instance.getId();
          });
        }
      }

      collection.all = function() {
         return store;
      }

            return {
            add: function(instance) {
             collection.add(instance);
          },
          all: function() {
             return collection.all();
          }
        }
    }

    function ancestoryService() {
      var allElements =document.querySelectorAll('[id]');
      console.log(allElements);

      if (allElements) {
        var collection = new ImageCollection();

        _.each(allElements, function(item, key) {
          var instance = new ImageService();
          instance.setsetInstance(instance);
          console.log('get instance', instance.getId());
          console.log('get instance', instance.getUrl());
          console.log('collection add', collection.add(instance));
          console.log('collection all', collection.all());
        })
      }
    }

    ancestoryService();
    })();