javascript - 在页面加载时激活jQuery img和文本操作

我建立了一个小 bootstrap 3缩略图文本和img操作，现在我有一个关于如何在页面加载时激活此问题的问题，具体来说，我希望#anime1在页面加载时激活。

查看这个manipulation示例。您会看到我在那里显示了一堆缩略图，但是当您与操作进行交互时，它将显示选定的navbar标题所需的所有内容。

那么如何在页面加载时激活它呢？

$(function(){
    $('#anime1').click(function(){

        $('.column').each(function(){
            $( this ).hide( 500 );
        });
        $('.columns').each(function(){
            $( this ).show( 500 );

        $('#col1 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col1 h3').text('Grouting!');
        $('#col1 p:first').text('Grouting retention text will be displayed here!');

        $('#col2 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col2 h3').text('Grouting!');
        $('#col2 p:first').text('Grouting retention text will be displayed here!');

        $('#col3 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col3 h3').text('Grouting!');
        $('#col3 p:first').text('Grouting retention text will be displayed here!');

        $('#col4 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col4 h3').text('Grouting!');
        $('#col4 p:first').text('Grouting retention text will be displayed here!');

        $('#col5 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col5 h3').text('Grouting!');
        $('#col5 p:first').text('Grouting retention text will be displayed here!');

        $('#col6 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col6 h3').text('Grouting!');
        $('#col6 p:first').text('Grouting retention text will be displayed here!');
        });
    });

    $('#anime2').click(function(){
        $('.columns').hide( 500 );
        $('.column').hide( 500 );
    });
    $('#anime2').click(function(){
        $('.col4').show( 500 );

        $('#col4 img').attr('src', 'img/lazy0.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col4 h3').text('Ground Improvements!');
        $('#col4 p:first').text('Ground Improvements text will be displayed here!');
    });

    $('#anime3').click(function(){
        $('.column').each(function(){
            $( this ).show( 500 );
        });
        $('.columns').each(function(){
            $( this ).show( 500 );
        });
        $('#col1 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col1 h3').text('Earth Retention!');
        $('#col1 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col2 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col2 h3').text('Earth Retention!');
        $('#col2 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col3 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col3 h3').text('Earth Retention!');
        $('#col3 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col4 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col4 h3').text('Earth Retention!');
        $('#col4 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col5 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col5 h3').text('Earth Retention!');
        $('#col5 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col6 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col6 h3').text('Earth Retention!');
        $('#col6 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col7 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col7 h3').text('Earth Retention!');
        $('#col7 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col8').hide( 500 );
    });

    $('#anime4').click(function(){
        $('.column').each(function(){
            $( this ).show( 500 );
        });
        $('.columns').each(function(){
            $( this ).show( 500 );
        });
        $('#col1 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col1 h3').text('Structural Support!');
        $('#col1 p:first').text('Structural Support text will be displayed here!');

        $('#col2 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col2 h3').text('Structural Support!');
        $('#col2 p:first').text('Structural Support text will be displayed here!');

        $('#col3 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col3 h3').text('Structural Support!');
        $('#col3 p:first').text('Structural Support text will be displayed here!');

        $('#col4 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col4 h3').text('Structural Support!');
        $('#col4 p:first').text('Structural Support text will be displayed here!');

        $('#col5 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col5 h3').text('Structural Support!');
        $('#col5 p:first').text('Structural Support text will be displayed here!');

        $('#col6 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col6 h3').text('Structural Support!');
        $('#col6 p:first').text('Structural Support text will be displayed here!');

        $('#col7 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col7 h3').text('Structural Support!');
        $('#col7 p:first').text('Structural Support text will be displayed here!');

        $('#col8 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col8 h3').text('Structural Support!');
        $('#col8 p:first').text('Structural Support text will be displayed here!');

    });

    $('#anime5').click(function(){
        $('.column').hide( 500 );
        $('.columns').hide( 500 );
    });
    $('#anime5').click(function(){
        $('.col4').show( 500 );

        $('#col4 img').attr('src', 'img/lazy0.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col4 h3').text('Additional Technologies!');
        $('#col4 p:first').text('Additional Technologies text will be displayed here!');
    });

});

缩图:

  <div class="row">
     <div class=" col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-12">
            <ul class="nav nav-pills">
              <li role="presentation"><a id="anime1" href="#">Grouting</a></li>
              <li role="presentation"><a id="anime2" href="#">Ground Improvements</a></li>
              <li role="presentation"><a id="anime3" href="#">Earth Retention</a></li>
              <li role="presentation"><a id="anime4" href="#">Structural Support</a></li>
              <li role="presentation"><a id="anime5" href="#">Additional Technologies</a></li>
            </ul>
     </div>
 </div>

     <div class="row">
         <p style="padding: 10px;"></p>
     </div>

        <div class="row">
           <div id="col1" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col2" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end-->
            </div>

            <div id="col3" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col4" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 animate_col4">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>
                    <p class="text-center">Ovo ce da se animira za Additionl technologies.</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col5" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>
                    <p class="text-center">Ovaj ce da se animira za Ground Impovements!</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col6" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col7" class="column col-xs-2 col-sm-2 col-md-2 col-md-offset-4 col-lg-2 col-lg-offset-4">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col8" class="column col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>
        </div><!--/ end thumbnai row -->

最佳答案

将触发器附加到处理程序选择器

 $('#anime1').click(function(){
    //... all the code you have
 });

修改:

 $('#anime1').click(function(){
    //... all the code you have
 }).trigger('click');

编辑:每个注释的修改代码。 代码回顾

请注意，其中有些是偏爱的，有些可能是矫kill过正的，我将在每次更改时说明我的理由:

该代码可以正常工作，但是由于硬编码的id在标记中必须与代码中的id相同，因此维护起来很麻烦。

您可以简单地使用8列均带有SAME标记且没有id的列，并使用类启用元素的代码定向。这里的一个好处是链接的实际数量以及文本，图像等都可以变化。可以将其作为一个对象插入到文档中，也可以使用ajax获取更多链接。

为了简化我的评论，我将假设您已经指出只有5个“组”。可以从代码客户端或服务器到您将其他链接添加到这些链接的数组中。

而不是在缩略图中对内容进行硬编码，而是从脚本中注入(inject)内容，而是对脚本中的这些值进行硬编码。这将很难维持。

基于您的列标记的示例:注意此处没有ID。

 <div class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
    <div class="thumbnail">
      <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
      <div class="caption">
        <h3 class="thumbnail-head text-center">Text title, label, etc</h3>
        <p class="thumbnail-desc text-center">descritpion here</p>
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>

链接添加了两件事:'a'标记的类和data-thing='，每个都有一个名称。我们将使用此thing按名称定位JavaScript对象数组(查找它们)。

<ul class="nav nav-pills">
  <li role="presentation"><a id="anime1" class="mylinks" data-thing="grout" href="#">Grouting</a></li>
  <li role="presentation"><a id="anime2" class="mylinks" data-thing="ground" href="#">Ground Improvements</a></li>
  <li role="presentation"><a id="anime3" class="mylinks" data-thing="earth" href="#">Earth Retention</a></li>
  <li role="presentation"><a id="anime4" class="mylinks" data-thing="struct" href="#">Structural Support</a></li>
  <li role="presentation"><a id="anime5" class="mylinks" data-thing="tech" href="#">Additional Technologies</a></li>
</ul>

请注意，这些也可以从对象中注入(inject)。

这是对象。我用“myApp”命名。在此对象中，您可以看到数据以及我使用的一些功能。全文请参见在线注释。

// create my namespace, use any preexisting namespace by that name.
var myApp = myApp || {};

将数据添加到我们的 namespace

// This is the actual data object, it has some defaults that I use
myApp.loadObject = {
  defaultActiveLink: "grout",
  animateHideDelay: 500,
  animateShowDelay: 500,
  defaultColumnCount: 8,
  // array of "things" that we process (by name)
  things: [{
    name: "grout",// used to lookup
    linkText: "Grouting",// link text (if we wanted to inject it)
    // array of links in THIS thing - we use these
    columnData: [{
      "src": 'http://lorempixel.com/140/100/city',
      "alt": "City",
      "background": 'url(http://lorempixel.com/140/100/city)',
      "headtext": 'Grouting0!',
      "paragraphtext": 'Grouting 0 retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/city',
      "alt": "City",
      "background": 'url(http://lorempixel.com/140/100/city)',
      "headtext": 'Grouting 1!',
      "paragraphtext": 'Grouting1 retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/city',
      "alt": "City",
      "background": 'url(http://lorempixel.com/140/100/city)',
      "headtext": 'Grouting2!',
      "paragraphtext": 'Grouting2 retention text will be displayed here!'
    }]
  }, {
    name: "ground",
    linkText: "Ground Improvements",
    columnData: [{
      "src": 'http://lorempixel.com/140/100/nature',
      "alt": "Nature",
      "background": 'url(http://lorempixel.com/140/100/nature)',
      "headtext": 'Ground Improvements!',
      "paragraphtext": 'Ground 1 retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/nature',
      "alt": "Nature",
      "background": 'url(http://lorempixel.com/140/100/nature)',
      "headtext": 'Ground Improvements2!',
      "paragraphtext": 'Improvements 2  retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/nature',
      "alt": "Nature",
      "background": 'url(http://lorempixel.com/140/100/nature)',
      "headtext": 'Ground Improvements3!',
      "paragraphtext": 'Ground 3 Improvements retention text will be displayed here!'
    }]
  }, {
    name: "earth",
    linkText: "Earth Retention",
    columnData: [{
      "src": 'http://lorempixel.com/140/100/abstract',
      "alt": "Abstract",
      "background": 'url(http://lorempixel.com/140/100/abstract)',
      "headtext": 'Earth1!',
      "paragraphtext": 'Earth text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/abstract',
      "alt": "Abstract",
      "background": 'url(http://lorempixel.com/140/100/abstract)',
      "headtext": 'Mother Earth!',
      "paragraphtext": 'Mother Earth  text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/abstract',
      "alt": "Abstract",
      "background": 'url(http://lorempixel.com/140/100/abstract)',
      "headtext": 'Earthy!',
      "paragraphtext": 'Earthy retention text will be displayed here!'
    }]
  }, {
    name: "struct",
    linkText: "Structural Support",
    columnData: [{
      "src": 'http://lorempixel.com/140/100/cats',
      "alt": "Cats",
      "background": 'url(http://lorempixel.com/140/100/cats)',
      "headtext": 'Stuctural!',
      "paragraphtext": 'Structural retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/cats',
      "alt": "Cats",
      "background": 'url(http://lorempixel.com/140/100/cats)',
      "headtext": 'Struct!',
      "paragraphtext": 'Struct retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/cats',
      "alt": "Cats",
      "background": 'url(http://lorempixel.com/140/100/cats)',
      "headtext": 'Struct Last!',
      "paragraphtext": 'My Struct Last retention text will be displayed here!'
    }]
  }, {
    name: "tech",
    linkText: "Additional Technologies",
    columnData: [{
      "src": 'http://lorempixel.com/140/100/food',
      "alt": "Foody",
      "background": 'url(http://lorempixel.com/140/100/food)',
      "headtext": 'Tech!',
      "paragraphtext": 'Tech Tech Tech  text will be displayed here!'
    }]
  }]
};

在我们的命名空间中添加一些通用函数:

// some generic functions to process my "object" not all these are used so you could clip it down a bit
myApp.arrayObj = {
  indexOf: function(myArray, searchTerm, property) {
    for (var i = 0; i < myArray.length; i++) {
      if (myArray[i][property] === searchTerm) return i;
    }
    return -1;
  },
  indexAllOf: function(myArray, searchTerm, property) {
    var ai = [];
    for (var i = 0; i < myArray.length; i++) {
      if (myArray[i][property] === searchTerm) ai.push(i);
    }
    return ai;
  },
  lookup: function(myArray, searchTerm, property, firstOnly) {
    var found = [];
    var i = myArray.length;
    while (i--) {
      if (myArray[i][property] === searchTerm) {
        found.push(myArray[i]);
        if (firstOnly) break; //if only the first
      }
    }
    return found;
  },
  lookupAll: function(myArray, searchTerm, property) {
    return this.lookup(myArray, searchTerm, property, false);
  },
  remove: function(myArray, searchTerm, property, firstOnly) {
    for (var i = myArray.length - 1; i >= 0; i--) {
      if (myArray[i][property] === searchTerm) {
        myArray.splice(i, 1);
        if (firstOnly) break; //if only the first term has to be removed
      }
    }
  }
};

向我们的命名空间中添加一些自定义函数(只有一个...)

// custom functions
myApp.func = {
  /* activate the default specified by name */
  setDefault: function() {
    var activeDefault = myApp.loadObject.defaultActiveLink;
    var defaultIndex = myApp.arrayObj.indexOf(myApp.loadObject.things, activeDefault, "name");
    defaultIndex = !!activeDefault ? defaultIndex : 0;
    $('.nav-pills').find('.mylinks').eq(defaultIndex).trigger('click');
  }
};

标准jQuery的东西，也可以是我们称为的自定义函数。
这基本上可以完成您所有代码的工作:

// process on click, injecting the appropriate text
$('.nav-pills').on('click', '.mylinks', function() {
  // hide using the default hide delay in the object
  $('.columns').hide(myApp.loadObject.animateHideDelay);
  var thingtype = $(this).data('thing');// added to the link
  var thing = myApp.arrayObj.lookup(myApp.loadObject.things, thingtype, "name", true);//lookup by name
  var columns = $('.columns');// all the columns
  // process the links,showing them
  $.each(thing[0].columnData, function(index, item) {
    // cache to not do multiple DOM searches
    var tn = columns.eq(index).find('.thumbnail');
    var cap = tn.find('.caption');
    tn.find('img.img-thumbnail').attr('src', item.src).attr('alt', item.alt).prepend('background-image', item.background);
    cap.find('h3.thumbnail-head').text(item.headtext);
    cap.find('p.thumbnail-desc').text(item.paragraphtext);
    // show this one
    $('.columns').eq(index).show(myApp.loadObject.animateShowDelay);
  });
});

$(function() {
  // activate the default specified by name
  myApp.func.setDefault();
});

关于javascript - 在页面加载时激活jQuery img和文本操作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36874187/