document.ready関数によって通知される追加値を取得する

Question

document.ready関数は、ページが既にレンダリングされたときに追加機能に気づく方法はありますか？

以下は、コードスニペットとともにdocument.ready関数です。たとえば、window.onloadと

jQuery(document).ready(function() { 
 
    
 
      var index = 1; 
 
      var testNum =1; 
 
      var slideLen = $('.slide-container').length; 
 
      $('.slide-thumb').click(function (event) { 
 
       var slideNum = $(this).attr('data-slide'); 
 
       var el = $('.slide-container[data-slide=' + slideNum + ']'); 
 
       index = slideNum; 
 
    
 
       $(el).addClass('show-slide'); 
 
       $(el).siblings('.slide-container').removeClass('show-slide'); 
 
       $(this).siblings('.slide-thumb').removeClass('show-slide-thumb'); 
 
       $(this).addClass('show-slide-thumb'); 
 
    
 
     
 
    
 
     }); 
 
    
 
     function autoSlide() { 
 
      timer = setInterval(function() { 
 
    
 
       if (index >= slideLen) { 
 
        index = 0; 
 
       } 
 
       $('.slide-thumb[data-slide=' + ++index + ']').click(); 
 
       testNum++; 
 
    
 
      }, 6000); 
 
     } 
 
    
 
     autoSlide(); 
 
     }); 
 

 

 
function showDetails(elementID) { 
 
     $('.details-container').addClass('show'); 
 
    
 
     $('.top-section').append(
 
     '<span id="car_name" style="font-size:2em">' + obj[0].make + '</span>'  + 
 
     '<span id="car_price" style="float:right;font-size:2em;font-weight: bold;color:#23F4ED;" >' + '¢' + obj[0].price + '</span>' 
 
    ); 
 
    
 
     $('.slide').find('.slide-container').remove(); 
 
     $('.slide').append 
 
     (
 
      '<li class="slide-container show-slide" id="sl" data-slide="1"><div class="slide-image" style=" background:url(' + obj[0].image + '); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>' 
 
      + 
 
      '<li class="slide-container" data-slide="2"><div class="slide-image" style=" background:url('+obj[0].image2+'); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>' 
 
     
 
    ); 
 
     $('.thumbs').find('.slide-thumb').remove(); 
 
     $('.thumbs').append 
 
      (
 
      '<li class="slide-thumb show-slide-thumb" id="hit" data-slide="1"><a ><img src="img/car1.jpg" /></a></li>' 
 
      + 
 
      '<li class="slide-thumb" id="hit" data-slide="2"><a ><img src="img/car1.jpg" /></a></li>' 
 
     
 
     ); 
 
    }

h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-weight: 300; 
 
    -webkit-font-smoothing: antialiased 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: inherit; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none 
 
} 
 
p { 
 
    margin-bottom: 20px; 
 
    line-height: 2; 
 
    font-size: 1rem; 
 
    font-weight: 300; 
 
} 
 
html { 
 
    background-color: #fff; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit 
 
} 
 
body { 
 
    width: 100vw; 
 
    font-family: 'open sans', sans-serif; 
 
    font-size: 100%; 
 
    font-weight: 300; 
 
    color: #212121; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
    -webkit-font-smoothing: antialiased 
 
} 
 

 
header { 
 
    width:inherit; 
 
} 
 

 

 

 
.menu-bar{ 
 
height:70px; 
 
width:100%; 
 
background: #02243E; 
 
} 
 
.menu-bar .section-container{ 
 
padding: 0px; 
 
display: table; 
 
} 
 
.logo-container{ 
 
display: inline-block; 
 
vertical-align: top; 
 
    height: 70px; 
 
} 
 
.logo-container h1{ 
 
    margin-top: 20px; 
 
color: #40C2F1; 
 

 
} 
 
.menu-container{ 
 
    float: right; 
 
display: inline-block; 
 
    height: 70px; 
 
    } 
 
.menu{ 
 
    width: inherit; 
 
    height: inherit; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 

 
} 
 
.logo{ 
 
    display: flex; 
 
    height:55px; 
 
    font-size: 1.5rem; 
 
    justify-content: flex-start; 
 
} 
 

 
.menu ul{ 
 
display: flex; 
 
    justify-content: flex-end; 
 
    color: #40C2F1; 
 
    list-style-type: none; 
 

 
} 
 
.menu-item{ 
 
    margin-left: 40px; 
 
} 
 

 
.banner-wrap{ 
 
height:50vh; 
 
background: #D6D6D6; 
 
width: inherit; 
 
} 
 

 
.section-title{ 
 
width:100%; 
 
text-align: center; 
 
margin-bottom:25px; 
 
color: 
 

 
} 
 
.mini-section-title{ 
 
width:100%; 
 
text-align: center; 
 
margin-bottom:25px; 
 

 
} 
 
.content-text{ 
 
    color:#95989A; 
 
    padding: 0px 25px; 
 
} 
 
.section-container{ 
 
    padding:50px 0px; 
 
    width: 90vw; 
 
    max-width: 1250px; 
 
    margin: 0 auto; 
 
    height:inherit; 
 
} 
 
.content-area{ 
 
    vertical-align: top; 
 
    width: 75%; 
 
    display: inline-block; 
 
    height: auto; 
 
} 
 
.side-content{ 
 
     width: 24%; 
 
    height: auto; 
 
    display: inline-block; 
 
} 
 

 
.welcome-section{ 
 
height:auto; 
 

 
} 
 
.welcome-section .section-title{ 
 

 
color: #40C2F1; 
 

 
} 
 
.categories-section{ 
 
height:auto; 
 
border: 1px solid #C9CACA; 
 
background: #F8FAFC; 
 
} 
 

 
.categories-section .mini-section-title{ 
 
color: #3F3F3F; 
 
} 
 

 

 
.contact-section{ 
 
height:300px; 
 
width: inherit; 
 
background: #40C2F1; 
 
display: table; 
 
} 
 

 
.contact-section .innerwrap{ 
 
    color:white; 
 
    text-align: center; 
 
display: table-cell; 
 
vertical-align: middle; 
 

 
} 
 
.submit-button{ 
 
    width:auto; 
 
    padding:20px 40px; 
 
    color:white; 
 
    border:none; 
 
    border-radius:5px; 
 
    background:#23F4ED; 
 
} 
 
.category-wrap{ 
 
    width: auto; 
 
} 
 
.category-card{ 
 
    cursor: pointer; 
 
    margin: 25px 10px; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    width: 27vw; 
 
    max-width: 393px; 
 
    height: 25vw; 
 
    max-height: 393px; 
 
    background: #fff; 
 
    border:1px solid #C9CACA; 
 
    -moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 8px -1px #C9CACA; 
 
} 
 
.cat-icon-wrap{ 
 
display:table; 
 
width: 100%; 
 
height:75%; 
 
border-bottom: 1px solid #C9CACA; 
 
} 
 

 
.cat-icon{ 
 
display:table-cell; 
 
vertical-align: middle; 
 

 
} 
 

 
.cat-img{ 
 
margin:0 auto; 
 
width:45%; 
 
height:56.25%; 
 
background: black; 
 
} 
 
.cat-description{ 
 
    display: table; 
 
    width: 100%; 
 
    height:24%; 
 
} 
 
.cat-text{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    color: #40C2F1; 
 
} 
 

 

 
.line{ 
 
height: 1px; 
 
width: 100%; 
 
background: #95989A; 
 
} 
 
.footer-top{ 
 
width: 100%; 
 
height: auto; 
 
} 
 
.social-icons{ 
 

 
color: #40C2F1; 
 
text-align: right; 
 

 
} 
 
.sitemap{ 
 
color: #40C2F1; 
 
list-style-type: none; 
 
margin: 0px; 
 
padding: 0px; 
 
} 
 
.footer-content{ 
 
    width: 100% 
 
} 
 
.footer-bottom{ 
 
padding:20px 0px; 
 
color: #40C2F1; 
 
width: 100%; 
 

 
} 
 
.foot-link{ 
 
margin-bottom:15px; 
 
} 
 

 
.footer-icon{ 
 
font-size: 2.5rem; 
 
margin-left:5px; 
 
display: inline-block; 
 
width: auto; 
 
} 
 
.base-left{ 
 
text-align: left; 
 
float: right; 
 
} 
 
.base-right{ 
 
text-align: right; 
 
} 
 

 
.footer-column{ 
 
    vertical-align: top; 
 
    width: 24.5%; 
 
display: inline-block; 
 
height:200px; 
 
} 
 
.search-banner{ 
 
height:auto; 
 
width: 100%; 
 
background-position: center; 
 
background-repeat: no-repeat; 
 
background-size: cover; 
 

 
} 
 
.search-field-wrap{ 
 
height: auto; 
 
width: 100%; 
 
margin: 50px 0px; 
 
} 
 
.combobox{ 
 
border-radius: 5px; 
 
height:40px; 
 
width: 15vw; 
 
padding: 5px; 
 
text-align: center; 
 
border:1px solid #C9CACA; 
 
display: inline-block; 
 
margin: 0px 10px 0px 10px; 
 

 
    -moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 8px -1px #C9CACA; 
 
} 
 
.button-wrap{ 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.image-card{ 
 
    cursor: pointer; 
 
    margin: 0px 10px 25px 0px; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    width: 20vw; 
 
    height: 25vw; 
 
    max-width: 295px; 
 
    max-height: 320px; 
 
    background: #fff; 
 
    border: 1px solid #C9CACA; 
 
    -moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 8px -1px #C9CACA; 
 
} 
 

 

 
.card-wrap{ 
 
display:table; 
 
width: 100%; 
 
height:65%; 
 
border-bottom: 1px solid #C9CACA; 
 
} 
 

 
.card-icon{ 
 
width:100%; 
 
height:100%; 
 
background-position: center; 
 
background-repeat: no-repeat; 
 
background-size: cover; 
 
border-radius: 5px 5px 0px 0px; 
 
} 
 

 
.card-img{ 
 
margin:0 auto; 
 
width:45%; 
 
height:56.25%; 
 
background: black; 
 
} 
 
.card-description{ 
 
    width: 100%; 
 
    height: 35%; 
 
} 
 
.card-text{ 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 49%; 
 
    height:100%; 
 
    color: #40C2F1; 
 
} 
 
.card-text-wrapper{ 
 
    display: table; 
 
    width:100%; 
 
     height: 100%; 
 
    text-align: center 
 
} 
 
.vehicle-details{ 
 
    margin-bottom: 2px; 
 
    line-height: 1.2; 
 
    font-size: 0.7rem; 
 
} 
 

 
.vehicle-name{ 
 
    font-size: 1rem; 
 
    line-height: 1; 
 
    margin-bottom: 5px; 
 
} 
 

 
.card-details{ 
 
    padding-left: 15px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
} 
 
.price-tag{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    font-size: 1.5rem; 
 
    font-family: 'lato', -serif; 
 
    font-weight: 700; 
 
    color: #23F4ED; 
 
} 
 
.ad-images{ 
 
    width: 100%; 
 
    margin-bottom: 25px; 
 
} 
 
.top-section{ 
 
height:250px; 
 
width: 100%; 
 

 
} 
 
.details-container{ 
 
position:fixed; 
 
margin: 0; 
 
padding-top: 10%; 
 
    padding-bottom: 10%; 
 
width:100%; 
 
opacity: 0; 
 
height:100%; 
 
background: rgba(2,36,62,0.3); 
 
z-index: 1000; 
 
transition:all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86); 
 
visibility: hidden; 
 
/* Safari */ 
 
} 
 

 
.show{ 
 
    visibility: visible; 
 
    opacity: 1; 
 

 

 

 
} 
 

 
.details-card{ 
 
    display: block; 
 
    margin: auto; 
 
    padding:15px 11px; 
 
    padding-top:; 
 
height: auto; 
 
width: 800px; 
 
background: white; 
 
border-radius: 5px; 
 
    border:1px solid #C9CACA; 
 
    -moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 8px -1px #C9CACA; 
 

 
} 
 
.details-card-header{ 
 
    height: 40px; 
 
} 
 
.close-button{ 
 
    cursor: pointer; 
 
    color: #C9CACA; 
 
    font-size: 1.5em; 
 
    font-weight: bolder; 
 
    float: right; 
 
    background: none; 
 
    border: none; 
 
} 
 
.details-card-content{ 
 
/*height: 90%;*/ 
 
height: 500px; 
 
overflow-y: scroll; 
 
padding: 11px; 
 
} 
 

 
/*.details-card{*/ 
 
    /*height: 900px;*/ 
 
    /*overflow-y: scroll;*/ 
 
    /*padding: 11px;*/ 
 
/*}*/ 
 

 
.details-card-content::-webkit-scrollbar { 
 
width:8px; 
 
background: white; 
 

 
} 
 
.details-card-content::-webkit-scrollbar-track { 
 
    width: 15px; 
 
} 
 
.details-card-content::-webkit-scrollbar-thumb { 
 
border-radius: 5px; 
 
background: #C9CACA; 
 
} 
 

 
.slider-card{ 
 
    margin: 0px 10px 25px 0px; 
 
    width: 100%; 
 
    max-width: 900px; 
 
    height:425px; 
 

 
    background: #fff; 
 
    border:1px solid #C9CACA; 
 
    -moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 8px -1px #C9CACA; 
 
    margin-top: -150px; 
 
} 
 

 

 
.car-details-card{ 
 
    margin: 0px 10px 25px 0px; 
 
    border-radius: 5px; 
 
    display:inline-block; 
 
    width: 470px; 
 
    height:40vh; 
 
    max-height: 300px; 
 
    background: #fff; 
 
    border:1px solid #C9CACA; 
 
    -moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 8px -1px #C9CACA; 
 
} 
 
.contact-card{ 
 
    vertical-align: top; 
 
    margin: 0px; 
 
    display:inline-block; 
 
    border-radius: 5px; 
 
    width: 262px; 
 
    height:25vw; 
 
    max-height: 300px; 
 
    background: #fff; 
 
    border:1px solid #C9CACA; 
 
    -moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 8px -1px #C9CACA; 
 

 

 
} 
 
.slide { 
 
    overflow: hidden; 
 
    /*border: 4px solid #E74C3C;*/ 
 
/* border: 4px solid #3498DB;*/ 
 
} 
 
.slide-container{ 
 
opacity:0; 
 
    transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); 
 

 
} 
 
.show-slide{ 
 
    opacity:1; 
 
} 
 

 
.slide-thumb { 
 
    opacity: 0.5; 
 
} 
 

 
.show-slide-thumb { 
 
    opacity: 1; 
 
} 
 

 
.slide, .slide li, .slide-image { 
 
    width: 100%; 
 
    height: 350px; 
 
    position: relative; 
 
    border-bottom:1px solid #C9CACA; 
 
    margin-top: -8px; 
 
    padding: 0px; 
 

 

 
} 
 

 
.slide li { 
 
    position: absolute; 
 
    z-index: 50; 
 

 
} 
 

 
/*Animation For Slider*/ 
 
@-webkit-keyframes 
 
slider { 0% { 
 
left: -500px; 
 
} 
 
100% { 
 
left: 0; 
 
} 
 
} 
 

 
.slide li:target { 
 
    z-index: 100; 
 
    -webkit-animation: slider 1s 1; 
 
} 
 

 
/*Not Target*/ 
 
@-webkit-keyframes 
 
noTarget { 0% { 
 
z-index: 75; 
 
} 
 
100% { 
 
z-index: 75; 
 
} 
 
} 
 

 
.slide li:not(:target) { -webkit-animation: noTarget 1s 1; } 
 
.thumbs { 
 
    margin-bottom: 10px; 
 
    display: flex; 
 
    justify-content: center; 
 
     padding: 0px; 
 
} 
 

 
.thumbs li, .thumbs li a { 
 
    width: 98px; 
 
    height: 55px; 
 
} 
 
.thumbs li{ 
 
    list-style-type: none; 
 
} 
 

 
.thumbs a { 
 
    /*display: block;*/ 
 
    position: relative; 
 
    font: bold 12px/25px Arial, sans-serif; 
 
    color: #515151; 
 
    text-decoration: none; 
 
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.25), inset 1px 1px 0px rgba(0, 0, 0, 0.15); 
 
} 
 

 
.thumbs li a img { 
 
    width: 90px; 
 
    height: 45px; 
 
border:1px solid #C9CACA; 
 
} 
 

 
.thumbs li a:hover span { 
 
    position: absolute; 
 
    z-index: 101; 
 
    bottom: -30px; 
 
    display: block; 
 
    width: 98px; 
 
    height: 25px; 
 
    text-align: center; 
 
    border-radius: 3px; 
 
    -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4); 
 
    -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4); 
 
    -o-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4); 
 
    -ms-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4); 
 
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4); 
 
    background: #fff; 
 
    background: -webkit-linear-gradient(top, #fff 0%, #bcbcbc 100%); 
 
    background: -moz-linear-gradient(top, #fff 0%, #bcbcbc 100%); 
 
    background: -o-linear-gradient(top, #fff 0%, #bcbcbc 100%); 
 
    background: -ms-linear-gradient(top, #fff 0%, #bcbcbc 100%); 
 
    background: linear-gradient(top, #fff 0%, #bcbcbc 100%); 
 
} 
 

 
.thumbs li a:hover span::before { 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 5px solid white; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    content: ""; 
 
    position: absolute; 
 
    top: -5px; 
 
    left: 44px; 
 
} 
 
.card-header{ 
 
height:25%; 
 
width: 100%; 
 
display: table; 
 
    height: 45px; 
 
border-bottom:1px solid #C9CACA; 
 
text-align: center; 
 

 
} 
 
.card-header h1{ 
 
vertical-align: middle; 
 
    display: table-cell; 
 
    font-size: 1rem; 
 
    color: #40C2F1; 
 
} 
 
.wrapper-dropdown-5 { 
 
    /* Size & position */ 
 
    position: relative; 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    margin-right:5px; 
 
    margin-bottom: 10px; 
 
    padding: 12px 15px; 
 
    display: inline-block; 
 
    /* Styles */ 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    border: 1px solid #C9CACA; 
 
    -moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 8px -1px #C9CACA; 
 
    cursor: pointer; 
 
    outline: none; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.inactive{ 
 
    /* Size & position */ 
 
    background: #f2f2f2; 
 
    pointer-events: none; 
 
    } 
 

 
.wrapper-dropdown-5:after { /* Little arrow */ 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 15px; 
 
    margin-top: -3px; 
 
    border-width: 6px 6px 0 6px; 
 
    border-style: solid; 
 
    border-color: #4cbeff transparent; 
 
} 
 
.wrapper-dropdown-5 .dropdown { 
 
    /* Size & position */ 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    right: 0; 
 

 
    width: auto; 
 
    min-width: 200px; 
 
    /* Styles */ 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    
 
    list-style: none; 
 
    transition: all 0.3s ease-out; 
 

 
    /* Hiding */ 
 
    max-height: 0; 
 
    overflow: scroll; 
 
} 
 

 
.dropdown::-webkit-scrollbar { 
 
width: 0.5em; 
 
background: white; 
 
border-radius: 5px; 
 

 
} 
 
.dropdown::-webkit-scrollbar-thumb { 
 
border-radius: 5px; 
 
background: #C9CACA; 
 
} 
 

 
.dropdown::-webkit-scrollbar-track { 
 
border-radius: 5px; 
 
} 
 

 

 
.wrapper-dropdown-5 .dropdown li { 
 
    padding: 0 10px ; 
 
} 
 

 
.wrapper-dropdown-5 .dropdown li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #333; 
 
    padding: 10px 0; 
 
    transition: all 0.3s ease-out; 
 
    border-bottom: 1px solid #e6e8ea; 
 
} 
 

 
.wrapper-dropdown-5 .dropdown li:last-of-type a { 
 
    border: none; 
 
} 
 

 
.wrapper-dropdown-5 .dropdown li i { 
 
    margin-right: 5px; 
 
    color: inherit; 
 
    vertical-align: middle; 
 
} 
 

 
/* Hover state */ 
 

 
.wrapper-dropdown-5 .dropdown li:hover a { 
 
    color: #57a9d9; 
 
} 
 
.wrapper-dropdown-5.active { 
 
    background: #4cbeff; 
 
    box-shadow: none; 
 
    border-bottom: none; 
 
    color: white; 
 
} 
 

 
.wrapper-dropdown-5.active:after { 
 
    border-color: #82d1ff transparent; 
 
} 
 

 
.wrapper-dropdown-5.active .dropdown { 
 

 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
 
    max-height: 400px; 
 
} 
 
.mini-left{ 
 
    width: 100px; 
 
    margin: 0; 
 
    padding: 12px 15px; 
 
    display: inline-block; 
 
    border-radius: 5px 0 0 5px; 
 
    border: 1px solid #C9CACA; 
 
    -moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 8px -1px #C9CACA; 
 
    outline: none; 
 
    transition: all 0.3s ease-out; 
 
} 
 
.mini-right{ 
 
    width: 100px; 
 
    margin: 0; 
 
     margin-right: 5px; 
 
      margin-left: -5px; 
 
    padding: 12px 15px; 
 
    display: inline-block; 
 
    /* Styles */ 
 
    border-radius: 0 5px 5px 0 ; 
 
    border: 1px solid #C9CACA; 
 
    -moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 8px -1px #C9CACA; 
 
    cursor: pointer; 
 
    outline: none; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 

 
/* pagination */ 
 

 
.archive-pages{ 
 

 
} 
 
.wrapper{ 
 
    background-color:red; 
 
    margin:50px auto; 
 
    width:100%; 
 
} 
 
/*****Delete this*****/ 
 

 
.archive-pages li.selected{ 
 
    color:white; 
 
} 
 
.archive-pages a, 
 
.archive-pages a:visited{ 
 
    color:#555; 
 
} 
 
.archive-pages li.selected{ 
 
    color:white; 
 
    padding:5px; 
 
    width:25px; 
 
    line-height:20px; 
 
    background: #063c65; 
 
    
 
} 
 
.archive-pages li.selected:hover{ 
 
    cursor:default; 
 
    background: rgb(53,121,214); 
 
} 
 
.archive-pages li:hover{ 
 
    background: #f2f2f2; 
 
} 
 
.archive-pages li a{ 
 
    cursor:pointer; 
 
    line-height:20px; 
 
    display:block; 
 
    padding:5px; 
 
    float:left; 
 
    width:25px; 
 
    text-aling:center; 
 
} 
 
.archive-pages{ 
 
    display:block; 
 
    float:left; 
 
    padding:0px; 
 
    margin:0px; 
 
    font-size:.8em; 
 
    border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
} 
 
.archive-pages ul{ 
 
    float:left; 
 
    margin:0px; 
 
    padding:10px; 
 
    list-style:none; 
 
} 
 
.archive-pages li{ 
 
    border:1px solid #C9CACA; 
 
    float:left; 
 
    font-weight:700; 
 
    margin:0 2px; 
 
    text-align:center; 
 
    border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
    background-color: white; 
 
-moz-box-shadow: 0.5px 0.5px 5px -1px #C9CACA; 
 
    -webkit-box-shadow: 0.5px 0.5px 5px -1px #C9CACA; 
 
    box-shadow:   0.5px 0.5px 5px -1px #C9CACA; 
 
    
 

 
} 
 
.archive-pages .first a, 
 
.archive-pages .previous a, 
 
.archive-pages .next a, 
 
.archive-pages .last a{ 
 
    overflow:hidden; 
 
    white-space:nowrap; 
 
    -webkit-transition-duration: 300ms; 
 
    -webkit-transition-property: width,text-indent,letter-spacing; 
 
    -webkit-transition-timing-function: ease; 
 
    -moz-transition-duration: 300ms; 
 
    -moz-transition-property: width,text-indent,letter-spacing; 
 
    -moz-transition-timing-function: ease; 
 
    -o-transition-duration: 300ms; 
 
    -o-transition-property: width,text-indent,letter-spacing; 
 
    -o-transition-timing-function: ease; 
 
} 
 
.archive-pages a{ 
 
    text-decoration:none; 
 
} 
 
.archive-pages .next a:after, 
 
.archive-pages .last a:after{ 
 
    content:" »"; 
 
} 
 
.archive-pages .first a:before, 
 
.archive-pages .previous a:before{ 
 
    content:'« ' 
 
} 
 
.archive-pages .first a:hover, 
 
.archive-pages .previous a:hover, 
 
.archive-pages .next a:hover, 
 
.archive-pages .last a:hover{ 
 
    width: 100px; 
 
    text-indent:0; 
 
    letter-spacing:0px; 
 
} 
 
.archive-pages .first a{ 
 
    text-indent:+6px; 
 
    letter-spacing:10px; 
 
} 
 
.archive-pages .previous a{ 
 
    text-indent:+7px; 
 
    letter-spacing:10px; 
 
} 
 
.archive-pages .next a{ 
 
    text-indent:-159px; 
 
    letter-spacing:10px; 
 
} 
 
.archive-pages .last a{ 
 
    text-indent:-154px; 
 
    letter-spacing:10px; 
 
} 
 

 

 

 

 

 
/*pagination ends*/ 
 

 

 

 

 

 
footer{ 
 
background: #02243E; 
 
height:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!doctype html> 
 
<html> 
 
<head> 
 
    <!--META--> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/> 
 
    <meta name="theme-color" content=""/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
    <script src="{{asset('js/jquery.js')}}"></script> 
 
    <!--<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i" rel="stylesheet">--> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="{{ asset('css/style.css') }}"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300"> 
 

 

 
</head> 
 
<body> 
 
<div class="details-container"> 
 
    <div class="details-card"> 
 
     <div class="details-card-header"> 
 
      <button class="close-button">X</button> 
 
     </div> 
 
     <div class="details-card-content"> 
 

 
     </div> 
 

 
    </div> 
 
</div> 
 
<header> 
 
</header> 
 
<div class ="categories-section"> 
 
    <div class="section-container"> 
 

 
     <div class="content-area"> 
 
      <div class="image-card" onClick="showDetails(1)"> 
 
       <div class="card-wrap"> 
 
        <div class="card-icon" style="background-image:url('{{asset('img/car1.jpg') }}')"> 
 

 
        </div> 
 
       </div> 
 
       <div class="card-description"> 
 
        <div class="card-text"> 
 
         <div class="card-text-wrapper"> 
 
          <div class="card-details"> 
 
           <p class="vehicle-name">make</p> 
 
           <p class="vehicle-details">year</p> 
 
           <p class="vehicle-details">type</p> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="card-text"> 
 
         <div class="card-text-wrapper"> 
 

 
          <h1 class="price-tag">price</h1> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div id="tSection" class="top-section"> 
 
</div> 
 

 
<div class="slider-card"> 
 
    <ul class="slide"> 
 
     <li class="slide-container show-slide" data-slide="1"><div class="slide-image" style=" background:url(img/car1.jpg); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li> 
 
     <li class="slide-container" data-slide="2"><div class="slide-image" style=" background:url(img/car1.jpg); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li> 
 
    </ul> 
 
    <ul class="thumbs"> 
 
     <li class="slide-thumb show-slide-thumb" data-slide="1"><a ><img src="img/car1.jpg" /></a></li> 
 
     <li class="slide-thumb" data-slide="2"><a ><img src="img/car1.jpg" /></a></li> 
 
    </ul> 
 
</div> 
 
<div class="car-details-card"> 
 
    <div id="card-details" class="card-header"> 
 
     <h1>Car details</h1> 
 
    </div> 
 
</div> 
 

 
<div class="contact-card"> 
 
    <div id="vendor-details" class="card-header"> 
 
     <h1>Vendor Contact Info</h1> 
 
    </div> 
 

 
</div> 
 
<footer> 
 
</footer> 
 
</body> 
 
</html>

Answer 1

あなたはjQueryの委任クリックハンドラ・メカニズムを使用する必要がまだありません修正するために、いくつかの異なるものを試してみました。

は、私たちが起動したときに、これが存在していると私たちはあなたのul.thumbs HTMLにクリックハンドラを追加http://api.jquery.com/on/

に委任イベントを参照してください。ただし、他のスライドを追加することは可能です。そのため、標準のイベントハンドラは動作しません（見たように）。

動的に追加されたエントリをクリックして、実際の動作を確認してください。

$(document).ready(function() 
 
{ 
 
    // We use a deferred click handler here as we will add further slide thumbs as we run... 
 
    $("ul.thumbs").on("click", "li.slide-thumb", function(e) 
 
    { 
 
     alert($(this).data("slide")); 
 
    }); 
 
    
 
    // Dynamically add new slides 
 
    for(var i=3; i<10; i++) 
 
    { 
 
     var $li = $("<li />").addClass("slide-thumb").data("slide", i); 
 
     $li.append($("<img />").attr("src","//tesco.scene7.com/is/image/tesco/410-8422_PI_TPS2655715?op_sharpen=1&amp;wid=90&amp;hei=90")); 
 
     
 
     $("ul.thumbs").append($li); 
 
    } 
 
});

img 
 
{ 
 
    height:50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="thumbs"> 
 
    <li class="slide-thumb show-slide-thumb" data-slide="1"> 
 
     <img src="//tesco.scene7.com/is/image/tesco/410-8422_PI_TPS2655715?op_sharpen=1&amp;wid=90&amp;hei=90"> 
 
    </li> 
 
    <li class="slide-thumb" data-slide="2"> 
 
     <img src="//images.clipartpanda.com/car-20clip-20art-nicubunu_Toy_car.png"> 
 
    </li> 
 
</ul>