使用jquery的數據屬性來關聯兩個元素

我在jQuery中學到的第一件事情是Click()函數，以及獲取一個元素來影響另一個元素的好處。但是，當我有一組項目（遍佈在我的文檔中）時，我應該怎麼做才能使整個'更多的元素數組再次散佈在我的文檔中？使用jquery的數據屬性來關聯兩個元素

在我奇怪的想法中，我想使用數據屬性。你可以在這裏看到一個非常簡化的版本：http://jsfiddle.net/Qnzpg/

首先，我在jsfiddle上的例子有很多更好的解決方案，我知道。但是，真正的應用程序有點複雜，需要這種方法。

我試圖通過作爲變量我的數據屬性的值，並且具有共享變量來實現的元件（在我的例子，通過具有將其添加一個類）：

$("#menu [data-cell]").click(function (e){ 
    e.preventDefault; 

    //make the data value a variable 
    var $cell = $(this).data(); 

    //find the other element with the same data value and add the class named "open" 
    $('#pages [data-cell='$cell']').addClass('open'); 
});

我我已經很長時間一直在和我的jQuery一起擺弄，感覺最好是打電話給專家。

我在做什麼錯了？

來源

2013-11-05 invot

有什麼問題串連$細胞？ –

在這裏你去：

$('#menu li a').each(function() { 
    $(this).click(function() { 
     var attr = $(this).parents('li').attr('data-cell'); 
     $('#pages div').each(function() { 
      $(this).removeClass('open'); 
      if($(this).attr('data-cell') == attr) { 
       $(this).addClass('open'); 
      } 
     }); 
    }); 
});

小提琴：http://jsfiddle.net/Qnzpg/7/

來源

2013-11-05 02:01:40

這裏有什麼運氣？我很想知道這是否適用於你:) –

雖然這在我的實際應用程序中不起作用，但這幫助我瞭解了我做錯了什麼。我想知道你爲什麼決定使用'.each（）'。你能解釋爲什麼這會使事情發揮作用嗎？ – invot

嗨@invot，感謝您的反饋。 http://api.jquery.com/each/是一個循環結構，允許您爲每個項目（在本例中爲每個鏈接）設置上下文，然後將隨後的代碼與該上下文相關聯。您可以像這樣讀取它：對於每個鏈接，單擊時，將指定的屬性存儲爲變量...然後爲每個指定的div檢查相同的屬性變量並執行一些操作。 –

您沒有正確的語法爲您的字符串連接，我覺得你要搶只爲data-cell屬性的值。

var $cell = $(this).data('cell'); 
$('#pages [data-cell="' + $cell + '"]')

雖然爲了安全起見，我用雙引號將選擇器值封裝起來以防數據有空間。

來源

2013-11-05 02:02:07

我做了修改你的代碼，現在可以正常運行

那麼首先我認爲你是錯的，因爲你沒有串聯變量$細胞，但我意識到以後你不要讓ATTR數據單元格，你需要得到的數據單元這樣的值：

var $cell = $(this).attr('data-cell');

，需要這樣的

$('#pages [data-cell='+$cell+']').toggle('open');

來源

2013-11-05 02:04:11 godie

使用jquery的數據屬性來關聯兩個元素

回答

相關問題