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

优化切换多个图像并显示和隐藏div

1 个答案: