優化切換多重圖像並顯示和隱藏div

Question

我需要一些幫助來優化我在網上找到的代碼http://jsfiddle.net/eD4BY/4/。我想用這個代碼來製作多個圖片。我已經嘗試多次重複代碼，如下所示，但我知道這不是最好的方式。你們能幫助我嗎？ 我想點擊圖片之一時，關聯的image1描述顯示，當我點擊另一個image2時，只有image2描述顯示。在我當前的代碼中，我必須單擊一次才能顯示圖像，然後單擊該圖像以隱藏描述，否則在多個圖像之間單擊我將顯示所有描述。

HTML

<div class="row"> 
    <div class="col-md-3"> 
      <img src="images/team1default.png" id="team1btn"/> 
      <br> 
     </div> 

    <div class="col-md-3"> 
      <img src="images/team2default.png" id="team2btn"/> 
      <br> 
     </div> 


     </div> 

     <div id="team1idd" class="display-none2"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <p> 
      team 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante ligula, volutpat tincidunt tincidunt eget, pharetra id libero. Donec vitae tempus mi. Vivamus molestie tellus lacinia aliquet consequat. Suspendisse dictum consectetur risus sed aliquam.   <p> 
     </div> 
     </div> 
     </div> 

     <div id="team2idd" class="display-none"> 
     <div class="row"> 
     <div class="col-md-12"> 
     <p> 
      team 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante ligula, volutpat tincidunt tincidunt eget, pharetra id libero. Donec vitae tempus mi. Vivamus molestie tellus lacinia aliquet consequat. Suspendisse dictum consectetur risus sed aliquam.   <p> 
     </div> 
     </div> 
     </div> 

jQuery的

<script> 

var btnone = $('#team1btn'); 
var iddone = $('#team1idd'); 

btnone.click(function() { 
    iddone.toggle(800, function() { 
     // change the button text according to the state of the "#idd" 
     if (iddone.hasClass('display-none2')) { 
     btnone.attr('src', 'images/team1active.png'); 
      iddone.removeClass('display-none2'); 
       } else { 
     btnone.attr('src', 'images/team1default.png'); 
      iddone.addClass('display-none2'); 
     } 
    }); 
    }); 
</script> 


<script> 

var btnone = $('#team1btn'); 
var iddone = $('#team1idd'); 

btnone.click(function() { 
    iddone.toggle(800, function() { 
     // change the button text according to the state of the "#idd" 
     if (iddone.hasClass('display-none2')) { 
     btnone.attr('src', 'images/team1active.png'); 
      iddone.removeClass('display-none2'); 
       } else { 
     btnone.attr('src', 'images/team1default.png'); 
      iddone.addClass('display-none2'); 
     } 
    }); 
    }); 
</script> 

<script> 



    var btn = $('#team2btn'); 
var idd = $('#team2idd'); 

btn.click(function() { 
    idd.toggle(800, function() { 
     // change the button text according to the state of the "#idd" 
     if (idd.hasClass('display-none')) { 
     btn.attr('src', 'images/team2active.png'); 
      idd.removeClass('display-none'); 
       } else { 
     btn.attr('src', 'images/team2default.png'); 
      idd.addClass('display-none'); 
     } 
    }); 
    }); 


</script> 

Answer 1

HTML

<div class="display-none content" data-content="1">- Here my hidden content 1 -</div> 
<div class="display-none content" data-content="2">- Here my hidden content 2 -</div> 
<!-- Button --> 
<img class="image" data-image="1" /> 
<img class="image" data-image="2" /> 

JS

var images = { 
    1: { 
     active: 'http://placekitten.com/g/100/150', 
     default: 'http://placekitten.com/g/200/300' 
    }, 
    2: { 
     active: 'http://placekitten.com/g/150/150', 
     default: 'http://placekitten.com/g/300/300' 
    } 
}; 

function setupImages() { 
    for (var prop in images) { 
     $('[data-image="' + prop + '"]').attr('src', images[prop].default); 
    } 
} 

setupImages(); 

$('.image').each(function (k, v) { 
    var self = $(this); 
    self.click(function() { 
     var contentNum = $(this).data('image'); 
     var content = $('[data-content="' + contentNum + '"]'); 
     $('.content').slideUp(800); 
     content.toggle(800, function() { 
      setupImages(); 
      if (content.hasClass('display-none')) { 
       self.attr('src', images[contentNum].active); 
       content.removeClass('display-none'); 
      } else { 
       self.attr('src', images[contentNum].default); 
       content.addClass('display-none'); 
      } 
     }); 
    }); 
}); 

Fiddle