jquery - Display specific thumbnail content when clicked -


i facing problem, every time click on thumbnail, display me content display me double in case, or in original project 6 times. managed make project title read work, struggle displaying project description in .project[x] , display once, gives me spinner , project title 2 times(or 6 in original version). figured out though problem in work-wrap section, can't identify or fix problem, yet.

after messing more html markup , js ended this, believe closer solution. displays 1 name (correctly each thumbnail) , each thumbnail shows classes (spinner/project1/project2)

example when clicked on first thumbnail: http://i.imgur.com/sieuzth.png

html markup:

    <div class="work-belt">         <div class="thumb-wrap">             <div class="thumb-container">                 <a href="#/" class="thumb-unit">                     <div data-class="project1" class="thumb-overlay">                         <strong>name1</strong>                     </div>                 </a>                 <a href="#/" class="thumb-unit">                     <div data-class="project2" class="thumb-overlay">                         <strong>name2</strong>                     </div>                 </a>             </div>         </div>          <div class="work-wrap">             <div class="work-container">                 <h4 class="project-title"></h4>                 <div class="project-load"></div>                 <div class="project1">                     <div style="width: 600px; height: 500px; background: #aaa;"></div>                     <p>1st description</p>                 </div>                 <div class="project2">                     <div style="width: 600px; height: 500px; background: #000;"></div>                     <p>2nd description</p>                 </div>             </div>         </div>      </div> <!-- ending of work-belt --> 

js markup:

function workload() {

$.ajaxsetup({ cache: false });  $('.thumb-overlay').click(function() {      var $this = $(this),              newtitle = $this.find('strong').text(),             newclass = $this.data('class'),             spinner = '<div class="loader">loading...</div>',             newwork = '<div class="project-load">'+ newclass +'</div>';     $('.project-load').html(spinner).load(newwork);     $('.project-title').text(newtitle);  }); 

}

your html contains 2 div's class = "project-load". remove whichever don't want.

jquery changing every $('.project-load') can find.


Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -