Question

我有几个链接（15）以及15个带有名称和图像的DIV。

在页面加载中我不会隐藏所有图像，每当我点击名称的链接或div的名称时，它都会打开。我设法点击div的名字，但没有链接，因为有多个一个都有不同的目标。

<ul>
 <li><a href="#">Donald</a></li>
 <li><a href="#">Mickey</a></li>
 (many more)
</ul>

<div class="box">
 <div id="name">Donald</div>
 <div id="name-image">
  <img src="...">
 </div>
</div>
<div class="box">
 <div id="name">Mickey</div>
 <div id="name-image">
  <img src="...">
 </div>
</div>
(many more)

$(document).ready(function() {
 $('#name-image').hide();
 $(function () {
  $('#name').click(function () {
   $(this).siblings('#name-image').slideToggle('fast')
  })
 })
});

Answer 1

ID不能相同。它们必须是独一无二的。

改用类。

尝试：

HTML：

<div class="box">
    <div class="name">Donald</div>
    <div class="name-image">
        <img src="...">
    </div>
</div>

JS：

$('.name-image').hide();       
$('.name').click(function () {
    $(this).closest('.box').find('.name-image').slideToggle('fast');
});

DEMO here.

Answer 2

元素的第一个ID必须是唯一的，因此请使用类值对类似元素进行分组

<div class="box">
 <div class="name">Donald</div>
 <div class="name-image">
  <img src="...">
 </div>
</div>
<div class="box">
 <div class="name">Mickey</div>
 <div class="name-image">
  <img src="...">
 </div>
</div>

然后

jQuery(function ($) {
    $('.name-image').hide();
    $('.name').click(function () {
        $(this).next().slideToggle('fast')
    })
});

演示：Fiddle

Answer 3

我建议您将“名称”和“名称图片”从ID更改为class。

如果您希望将每个<a>代码定位为要显示的不同.name-image，则可以在href代码中使用<a>属性。为此，您可以为目标div提供id，如下所示：

<ul>
<li><a href="#1">Donald</a></li>
<li><a href="#2">Mickey</a></li>
</ul>

<div class="box">
<div class="name">Donald</div>
<div class="name-image" id="1">
    <img src="..." />
</div>
</div>
<div class="box">
<div class="name">Mickey</div>
<div class="name-image" id="2">
    <img src="..." />
</div>
</div>

那么js就像：

$(document).ready(function() {
$('.name-image').hide();

$('ul li a').click(function(event) {
    var imgID = $(this).attr('href');
    $(imgID).slideToggle('fast');
});

$('.name').click(function () {
    $(this).next().slideToggle('fast');
});
});

Demo here

jquery.show（）在多个目标上

3 个答案: