jQuery整合和清理

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

$('.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>

等等

---

谢谢

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

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

我会这样做：

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

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

html:

---

我会这样做：

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

html:

---

不是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();
    });
});

---

祝你好运

不是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();
    });
});

---

祝你好运

您可以使用以下命令简化第一块代码：

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

---

您可以使用以下命令简化第一个代码块：

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

---

但这不会显示特定的屏幕截图，它会一次显示所有屏幕截图。但这不会显示特定的屏幕截图，它会一次显示所有屏幕截图。[class^=“listTest”]选择了什么？哎呀，我忘了用

屏幕截图

替换我使用的测试名称。现在做了。感谢您的通知[class^=“listTest”]选择了什么？哎呀，我忘了用

屏幕截图替换我使用的测试名称。现在做了。谢谢你的通知