使用jquery查找父div的id參考var

我是jquery的新手，所以如果這是一個簡單的任務，請原諒我，但是我在這裏要做的是雙重的。我的頁面上可以有1到4個顯示面板，每個面板上都有一個按鈕。每個顯示面板應該獨立於其他顯示面板，但顯示與其他顯示面板相同的內容（想象一本書，並能夠在每個窗格中查看教科書的4個不同章節，並在一個窗口中導航不影響另一個的內容）。我試圖通過複製顯示面板代碼，但給每個面板一個不同的ID（即面板1，面板2，面板3，面板4），然後具有相應的jQuery對象爲每個面板（命名爲相同顯示面板的ID）。所以當單擊其中一個按鈕時，我想查找父面板的ID並將其用作我的對象的var名稱（如果可以的話）。使用jquery查找父div的id參考var

下面是我正在嘗試做的簡化版本。按nav-button，

<div class="other-stuff"> 
    <div id="pane11" class="display-panel"> 
     <div class="row"> 
      <div class="nav"> 
       <button type="button" class="nav-button">Button</button> 
      </div> 
     </div> 
    </div> 
</div>

我想找到最接近div.display-panel到nav-button（在這種情況下，panel1）的ID。

然後我想在jQuery中使用id作爲var名稱。我有以下幾點：

var panel1 = displayPanel(1, 1); 
var panel2 = displayPanel(2, 1); 
var panel3 = displayPanel(3, 1); 
var panel4 = displayPanel(4, 1); 

function displayPanel(panelNumber, curContent) { 
    this.panelNumber = panelNumber; 
    this.curContent= curContent; 

    this.AdvanceContent = AdvanceContent; 
    function AdvanceContent() { 
     if ((this.curContent + 1) <= contentList.length - 1) { 
      this.curContent++; 
     } else { 
      this.ResetContent(); 
     } 
     $("#panel" + this.panelNumber).find(".body-text").load('html/' + contentList[this.curContent] + '.html'); 
    } 

    this.ResetContent= ResetContent; 
    function ResetContent() { 
     this.curContent = 0; 
     $("#panel" + this.panelNumber).find(".body-text").load('html/' + contentList[this.curContent] + '.html'); 
    } 
}

然後我想要做這樣的事僞腳本：

$(document).ready(function() { 
    $(".advance-content").click(function() { 
     var panel = existing displayPanel with name matching id of parent displayPanel; 
     panel.AdvanceContent(); 
    }); 
});

有沒有更好的方式來做到這一點比找到父displayPanel ID，然後運行它通過一個if-else？

來源

2013-11-14 Belizzle

我相信，如果你的標記心不是集的結構，和按鈕可以通過其他標記最接近的（），提供了一個選擇包裹將是最好的選擇，因爲你可以在的jsfiddle看到

http://jsfiddle.net/isibbot/V8wr2/

$(function(){ 
     $('.nav-button').click(function(){ 
     var p = $(this).closest('div[class^="display-panel"]').attr('id'); 
     alert(p); 
    }); 
});

來源

2013-11-14 15:54:33 Sibbo

這對於獲取id很有用，但是如何將該id與相應的對象關聯？ – Belizzle

爲什麼不在displayPanel函數中附加click事件，而不是在document.ready事件中附加點擊事件？在那裏，你已經知道你在哪個面板，所以你沒有問題找到它的ID。然後，您從document.ready事件調用每個displayPanel，並且一切都應該正常工作。

來源

2013-11-14 15:40:37 delCano

我該如何將jquery中的displayPanel對象與給定的顯示面板相關聯？ – Belizzle

你已經做了（儘管你的代碼中有一些額外的引號）： '$（「＃panel」+ this.panelNumber）' – delCano

爲了確保我理解你，你說的是在對象體內有點擊事件？（就像我在我的帖子中說的，我是新來的jquery，所以請原諒我的無知在這裏）如果我把調用內的對象體，並初始化4個對象，當我點擊其中一個按鈕，如何它與這4個對象中的一個相關聯？ – Belizzle

使用jquery查找父div的id參考var

回答

相關問題