jquery - jQuery 整合和清理

Question

编写一个更干净的版本的最佳方法是什么。我有一些想法，但希望在这里获得第二意见。

$('.screenshot1').click(function(){
    $('#screenshot1').show();
});
$('.screenshot2').click(function(){
  $('#screenshot2').show();
});
$('.screenshot3').click(function(){
  $('#screenshot3').show();   
});
$('.screenshot4').click(function(){
  $('#screenshot4').show();
});
  $('.screenshot5').click(function(){
    $('#screenshot5').show();
  });
$('.screenshot6').click(function(){
  $('#screenshot6').show();   
});
$('.screenshot7').click(function(){
  $('#screenshot7').show();   
});
$('#screenshot1, #screenshot2, #screenshot3, #screenshot4, #screenshot5, #screenshot6, #screenshot7, .modal-backdrop').click(function() {
  $('#screenshot1').hide();
  $('#screenshot2').hide();
  $('#screenshot3').hide();
  $('#screenshot4').hide();
  $('#screenshot5').hide();
  $('#screenshot6').hide();
  $('#screenshot7').hide();
});

HTML 看起来像这样：

<a class="screenshot1" href="#"></a>
<div id="screenshot1">
  <img src='homepage/screenshot1.jpg' alt='Screenshot 1' height='565' width='756' />
</div>

ETC....

谢谢！

Answer 1

$("[class^=screenshot]").click(function() {
      $('[id^="screenshot"]').hide();         
      var id = this.className.match(/screenshot(\d+)/)[1];
      $('#'+id).show()
}

Answer 2

我将对所有屏幕截图 ID 使用一个选择器，然后使用each 方法。编辑：PSR 的答案更好。

Answer 3

I would do something like this:

html:

<div class="container">
    <div class="screenshot">
        <img src="image.png"/>
    </div>
</div>

Apply the same class to all your screenshots:

$('.screenshot').click(function(){
    $(this).parent('.container'). find('.screenshot') .each(function () {
        $(this).hide();
    });
    $(this).show();
});

Answer 4

您可以使用以下内容简化您的第一个代码块，

$(".screenshot1, .screenshot2, .screenshot3, .screenshot4, .screenshot5, .screenshot6, .screenshot7").click(function(){ 
       $("#" + $(this).attr("class")).show();
    });

演示

Answer 5

不是 100% 确定这是否是您的意思，但我希望它有助于您找到正确的方法：

'use strict';
$(document).ready(function(){
    $('[class^="screenshot"]').click(function(){
        // Hide them all
        $('[id^="screenshot"]').hide();

        // Show only the clicked one
        var id_name = $(this).attr('id');
        $('#' + id_name).show();
    });
});

祝你好运！