Question

我需要编写一个函数，最好是在jQuery中，它允许显示带有相应项目描述的div。

这是我到目前为止所做的：

<img src="img1.png" id="img1">

<div id="div1" style="display:none">
description 1
</div>

<img src="img2.png" id="img2">

<div id="div2" style="display:none">
description 2
</div>

<img src="img3.png" id="img3">

<div id="div3" style="display:none">
description 3
</div>

单击image1应显示div1。一次只能打开一个div。但我认为jQuery是解决这个问题的最佳途径。现在确定它是如何完成的......

Answer 1

$(document).ready(function(){
  $('#img1').click(function(){
     $('#div1').show();//or use .toggle() to show/hide
  });
});

如果您只是在图像之后切换 next div，请提供图像和div类，并对其进行一般处理。

Ex: <img class="toggleImage"/><div class="toggledDiv"></div>

$('.toggleImage').click(function(){
  $(this).next('.toggledDiv').toggle();
});

要确保一次只打开一个div，请执行以下操作：

$('.toggleImage').click(function(){
  $(this).siblings('.toggledDiv').hide();
  $(this).next('.toggledDiv').show();
});

Answer 2

$('#img1').click(
       function() { 
          $('#div1').toggle(); 
 });

Answer 3

将单击事件绑定到显示div的图像。

$("#img1").click( function() {
     $("#div1").show();
}

Answer 4

jQuery有一个show()方法，可用于显示特定项目。

如果您希望能够根据上下文显示/隐藏，可以使用toggle()。

Answer 5

$("img").bind("click", function(){
  var divid = $(this).attr(id);
  divid = divid.replace("img","div");
  $("#"+divid).toggle();
});

Answer 6

function showOnly(inDiv)
{
   $("#div1").hide();
   $("#div2").hide();
   $("#div3").hide();

   $(inDiv).show();
}

$(document).ready(function(){
  $("#img1").click(showOnly("#div1"));
  $("#img2").click(showOnly("#div2"));
  $("#img3").click(showOnly("#div3"));
});

有一些方法可以使用列表或使用通配符作为身份证号码 - 但我相信这会让你朝着正确的方向前进......

使用jQuery显示/隐藏div

6 个答案: