那些遇到过的问题

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

cop*_*ser 6 html javascript css jquery image

我建立一个小的引导3缩略图文字和IMG操作,现在我已经就如何使这种主动当页面加载问题,是具体的,我想这#anime1是当页面加载活跃.

看看这个操作示例.你会看到我有一堆缩略图只显示在那里,但是当你与操作交互时,它会显示你需要查看所选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!');
    });

});
Run Code Online (Sandbox Code Playgroud)

缩略图:

  <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 -->
Run Code Online (Sandbox Code Playgroud)

Mar*_*iss 3

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

 $('#anime1').click(function(){
    //... all the code you have
 });
Run Code Online (Sandbox Code Playgroud)

修改：

 $('#anime1').click(function(){
    //... all the code you have
 }).trigger('click');
Run Code Online (Sandbox Code Playgroud)

编辑：每个评论修改代码。 代码审查

请注意，其中一些是偏好，有些可能是矫枉过正，我将对每个更改提出我的推理：

  • 该代码可以正常运行，但由于硬编码的 id 需要与代码中的标记相同，因此维护起来可能会很困难。
  • 您可以简单地使用 8 列，所有列都具有相同的标记，但没有 id，使用类来启用元素的代码定位。这里的一个好处是，链接的实际数量以及文本、图像等可能会有所不同。这可以作为一个 abject 推送到文档中，也可以使用 ajax 来获取更多链接。
  • 为了简化我的评论，我假设只有 5 个“组”，正如您所指出的。可以从代码客户端或服务器将其他链接添加到这些链接的数组中，具体取决于您。
  • 您不是从脚本中注入缩略图中的硬编码内容，而是在脚本中对这些值进行硬编码。这将很难维持。

基于您的列标记示例：注意此处没有 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>
Run Code Online (Sandbox Code Playgroud)

链接，添加了一些内容：“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>
Run Code Online (Sandbox Code Playgroud)

请注意，这些也可以从对象注入。

这是对象。我将其命名为“myApp”。在这个对象中，您可以看到数据以及我使用的一些函数。请参阅全文的内嵌评论。

// create my namespace, use any preexisting namespace by that name.
var myApp = myApp || {};
Run Code Online (Sandbox Code Playgroud)

将数据添加到我们的命名空间

// 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!'
    }]
  }]
};
Run Code Online (Sandbox Code Playgroud)

添加一些通用函数到我们的命名空间：

// 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
      }
    }
  }
};
Run Code Online (Sandbox Code Playgroud)

添加一些自定义函数到我们的命名空间（好吧只有一个......）

// 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');
  }
};
Run Code Online (Sandbox Code Playgroud)

标准 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();
});
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

96 次

最近记录：

9 年，6 月 前
相关归档
在React中,onChange和onInput之间有什么区别？ 61
将本地文件中的json数据加载到React JS中 60
可以取消jQuery延期吗？ 39
'@'符号在Javascript,Coffeescript或Jquery中有特殊含义吗？ 38
保存图像:文件还是blob？ 19
Jquery Scroll用户在屏幕上的一个像素 19
android webview浏览器是否支持html5功能？ 18
在IE上获取图像加载时的图像宽度失败 11
从URL获取图像时显示java.net.UnknownHostException:主机在android设备中未解析？ 6
React Native Image 如何使用 onError 3
难疑归档
For-each在JavaScript中的数组？ 4448
如何水平居中<div>？ 4116
使用jQuery为复选框设置"选中"？ 3988
如何使div 100%的浏览器窗口高度？ 2016
如何在SQL SELECT中执行IF ... THEN？ 1438
Markdown中的评论 1277
生成0到9之间的随机整数 1224
如何查看运行我的脚本的Python版本？ 1099
如何配置Visual Studio代码以始终在新选项卡中打开文件？ 1078
有哪些常用的命名git分支实例的例子？ 1034