Question

第2天

html ...

<div id="galleria">
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_impfstoffbehaelter.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_impfstoffbehaelter.jpg" ></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_abfuellnadel.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_abfuelllnadeln.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_impfstoffbehaelter.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_impfstoffbehaelter.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_impfstoffverteiler.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_impfstoffverteiler.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_luftverteiler.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_luftverteiler.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_praezisionsaufnahme.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_praezisionsaufnahme.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_praezisionshalter.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_praezisionshalter.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_schlauchreduzierung.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_schlauchreduzierung.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_setzrohr.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_setzrohr.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_triclamp_verschluss.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_triclamp_verschluss.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_verschluss_adapter.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_verschluss_adapter.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_winkelreduzierung.jpg"><img src="../Bens_Internet_Erik/bens_img/thumbnail_winkelreduzierung.jpg"></a></div>
<div class="images"><a href="../Bens_Internet_Erik/bens_img/image_zangenhalter.jpg"><img  src="../Bens_Internet_Erik/bens_img/thumbnail_zangenhalter.jpg"></a></div>
</div>

获取div中的每个div并将它们添加到数组中。他们应该拥有所有身份证，以便我可以说：

On click Div with ID="1" 
do this

这是一个缩略图导航..我的任务是同步一些div内容，我需要一种方法来询问点击了哪个缩略图（div）..

////////////////////////////////////////

应该是这样：“嘿！你是＃1，你是＃2，你是＃3，＃4，＃5，你是6＃，你是＃7，＃8，＃9，先生，你是＃ 10，＃11，＃12你是最后的......＃13。

然后这个：“好的..我点击缩略图＃4 ..所以我淡化＃4的内容（其中包含一个标题和一些信息 - 它基本上是一个非常宽的div，它将在某个位置滚动（休息时不会显示，而是显示溢出：隐藏））。如果我点击缩略图＃8，它将显示＃8的内容。

Answer 1

好的，回答你的问题，如下：

$("#galleria div").each(function(index, value) {
    $(this).attr("id", "galleria" + index);
});

应该这样做。

但是，话虽如此，通过使用诸如“eq”遍历方法，“：eq”选择器和“inArray”实用程序方法之类的东西，有更好的方法可以做你想要做的事情。

*编辑*

澄清每个如何在这里工作是假的/简化版本：

function each(callback) {
    for(var i = 0; i < elements.length; i++) {
        // next line is the same as callback(i, elements[i]), except it sets "this"
        callback.call(elements[i], i, elements[i]);
    }
 }

正如您所看到的那样，无论您是否使用参数，都会调用您提供的回调...但无论如何它们都会被传递给它。

Answer 2

这样的东西？

var $divs = $("#galleria div");

或者为了获得点击的缩略图，你可以写：

$("#galleria .images a").click(function(e) {
    // might want to do this unless you actually want to navigate away
    e.preventDefault(); 

    // href of the anchor clicked pointing to the full size image
    $(this).attr("href");        

    // which thumbnail was clicked
    $(this).find("img");        
});

如果您只是想为每个div添加一些ID，您可以写：

$("#galleria div").each(function(index, value) {
    $("div").attr("id", "thumbnail_" + index);
});

Answer 3

只需在事件处理程序中使用此引用.index()和.eq()。

<div id="galleria">
   <div id="images">
      <div class="image">
         <a href="#"><img src="image.jpg"/></a>
      </div>
   <div id="thumbnails">
      <div class="thumbnail">
         <a href="#"><img src="image.jpg"/></a>
      </div>
   </div>
</div>

var $galleria = $("#galleria");

$galleria.on('click','.thumbnail',function(event){
   var thumb, image;
   // Index of div that user clicked...
   $thumb = $(this);
   // get the corresponding image...
   $image = $galleria.find('#images .image').eq(thumb.index());

});

JQuery - 给每个<div>一个ID（数组？）</div> </div>

3 个答案: