jQuery - 將數據從jQuery函數傳遞到特定的div？

Question

我想從一個函數傳遞數據到一個特定的div，但我似乎無法得到這個工作。我正在製作一個圖庫瀏覽器，我只想通過我用來顯示圖片的計數器以及頁面中每個圖庫的文件總數。

下面是代碼：

jQuery的

$(document).ready(function() { 
    $('.photoset').each(function() { 
     $(this).data('counter', 0); 
     $items = $(this).find('img') 
     $(this).data('numItems', $items.length); 
    }); 



    var showCurrent = function (photoset) { 
     $items = photoset.find('img'); 
     var counter = photoset.data('counter'); 
     var numItems = $items.length; 
     var itemToShow = Math.abs(counter % numItems); 

     $items.fadeOut(); 
     $items.eq(itemToShow).fadeIn(); 
    }; 

    $('.photoset').on('click', function (e) { 
     e.stopPropagation(); 
     var photoset = $(this); 
     var pWidth = photoset.innerWidth(); 
     var pOffset = photoset.offset(); 
     var x = e.pageX - pOffset.left; 
     if (pWidth/2 > x) { 
      photoset.data('counter', photoset.data('counter') - 1); 
      if (photoset.data('counter') < 0) 
       photoset.data('counter', photoset.data('numItems') - 1); 
      showCurrent(photoset); 
     } else { 
      photoset.data('counter', photoset.data('counter') + 1); 
      if (photoset.data('counter') > photoset.data('numItems') - 1) 
       photoset.data('counter', 0); 
      showCurrent(photoset); 
     } 
     $(this).text(photoset.data('counter') + 1 + " de " + photoset.data('numItems')) 
    }); 
}); 

的Html剃刀

<div class="container"> 
    @{ var i = 10; } 
    @foreach (var item in Model) 
    { 
     <div class="row"> 
      <div class="col-md-4 col-md-offset-4 text-center"> 
       <br /> 
       @Html.DisplayFor(modelitem => item.NomeGaleria) 
       <br /> 
      </div> 
     </div> 
     <div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div> 
     <div class="row"> 
       <div class="photoset center-block"> 


        @{ var item2 = item.FilePaths;} 
        @for (var k = 0; k < Enumerable.Count(item2); k++) 
       { 
         <br /> 
         <img src="~/images/@Html.DisplayFor(modelItem2 => item2[k].FileName)" style="@(k != 0 ? "display: none" : "") " /> 
         <br /> 
        } 

       </div> 

     </div> 

    } 
</div> 

所以我想利用這個代碼

$(this).text(photoset.data('counter') + 1 + " de " + photoset.data('numItems')) 

將數據傳遞給「nav-informer」div，但它不起作用。有沒有人知道在這種情況下要做什麼？對不起，如果這是一個愚蠢的問題，我很新的jQuery。

UPDATE

這裏呈現的HTML頁面：

<div class="container"> 

    <div class="row"> 
     <div class="col-md-4 col-md-offset-4 text-center"> 
      <br /> 
      Galeria Um 
      <br /> 
     </div> 
    </div> 
    <div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div> 
    <div class="row"> 
      <div class="photoset center-block"> 



        <br /> 
        <img src="/images/572fdd6b-13eb-48d2-8940-23da73e056c0.JPG" style=" " /> 
        <br /> 
        <br /> 
        <img src="/images/018a55be-a8a7-4412-8415-1678d01eb6a2.JPG" style="display: none " /> 
        <br /> 
        <br /> 
        <img src="/images/e5b0bdcb-d517-49a5-818b-245d46c0a0d9.JPG" style="display: none " /> 
        <br /> 

      </div> 

    </div> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-4 text-center"> 
      <br /> 
      Galeria Dois 
      <br /> 
     </div> 
    </div> 
    <div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div> 
    <div class="row"> 
      <div class="photoset center-block"> 



        <br /> 
        <img src="/images/fdc2e9fd-978a-4150-87af-483e34f68798.JPG" style=" " /> 
        <br /> 
        <br /> 
        <img src="/images/b17d169d-e5ed-45cd-9901-1d9dc294c873.JPG" style="display: none " /> 
        <br /> 
        <br /> 
        <img src="/images/3ad1ae20-7102-4d69-b658-7b3d8cbfb9e8.JPG" style="display: none " /> 
        <br /> 
        <br /> 
        <img src="/images/4ef03a84-da00-4f93-b3a2-839ac2ec9ac2.JPG" style="display: none " /> 
        <br /> 

      </div> 

    </div> 

Answer 1

所以，既然你是新來的jQuery，使用$(this)基本上意味着「元素，我已經開始了這個過程，「你的情況是.photoset。所以$(this) = $('.photoset')

如果你想使文本的該行進入你的.nav-informer格，您需要更改$(this)到$('.nav-informer')

$('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems')); 

UPDATE

因此，看來你需要通過層次遍歷。每個'畫廊'.container？如果是的話，試試這個：

$(this).closest('.container').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems')); 

.closest()通過層次遍歷設法發現你開始元素的最接近父。 （在本例中爲$(this)）。

'.find（）'做了相反的事情，它沿着層次結構向下查找從前一點開始討論的元素的第一個實例。

把它們加在一起，我喜歡做的是.closest()到你試圖找到的元素的父親和.find()之後的元素。我覺得做.parents(),.children()和.siblings()變得凌亂。

更新2

好吧，我現在看到的 - 要導出每個庫的方式可能會有點冒險，最終，如果可能的話，我會包含您的畫廊和舉報人到同一容器中建議，但如果你要離開它這樣，試試這個：

$(this).closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems')); 

因此，使用.parent()會遍歷只有一個家長，在那裏，如果你需要走的更遠，你可以使用.parents()（以S ）或我最喜歡的.closest()。然後，一旦你達到你需要去的水平，您可以在.photoset之前使用.siblings()，或在我們的情況下，由於您的.nav-informer是總是在.row，你需要使用.prev()。這將選擇直接寫在您當前的div之前的div，在同一級別。

查看This Fiddle查看一個簡單的例子。