用jquery選擇器捕獲div

我很難過。我有一個從mysql查詢結果動態填充的表單。根據返回的行數，該過程將爲每行添加一個div，並用一個問卷表填充每個div。最初每個div都是隱藏的，並且對於每個div 都有一個切換按鈕，以及該表中該記錄內容的描述。用jquery選擇器捕獲div

每個div都動態分配一個id，例如「ACH」加上從mysql查詢返回的記錄的索引號。在的例子中，我現在使用的有兩個div，一個是「ACH925」，另一個是「ACH926」，這在調試器中很明顯。

問題是第一個div的切換按鈕會同時切換。 div2的切換按鈕沒問題;它只切換 div2。此外，div1的切換按鈕對div2具有可逆效果。如果兩個div不在相同的可見性模式下，div1 切換按鈕將設置div2爲隱藏，如果div1設置爲顯示，或者div1隱藏時顯示。

我希望每個div都是獨立的，並顯示或隱藏一個或兩個。

寫在一個PHP字符串，其中$值從查詢返回的索引號一些HTML代碼：和

$(document).ready(function() { 
    var container = $("#ACH'.$value.'"); 
    console.log(container.prop("id")); 
    $(".showBtn").click(function() { 
     container.toggle(); 
    }); 
});

：

$(document).ready(function() { 
    var rows=1; 
    for (i=0; i<=rows-1; i++) { 
     var table = document.getElementById("ACHTable'.$value.'"); 
     var row = table.insertRow(-1); 
     var cell = row.insertCell(-1); 
     cell.width = "12%"; 
     cell.innerHTML = "<button id=\"shwBtn'.$value.'\" class=\"showBtn\" type=\"button\">Show/Hide</button>"; 

     cell = row.insertCell(-1); 
     cell.width = "88%"; 
     cell.style.fontSize="14px"; 
     cell.innerHTML = "DisputeID: '.$value.';&nbsp;&nbsp;Dispute Date: '.$dd[$ctr].';&nbsp;&nbsp;Merchant: '.$mer[$ctr].'"; 
     cell.innerHTML+= ";&nbsp&nbsp;Transaction Amount: $'.money_format('%i', ($amt[$ctr]/100)).'"; 
    } 
});

和下面的代碼，其中切換被執行最後這從控制檯，其中divs明顯可見：

enter image description here

想法，任何人？

來源

2015-04-29 jazcam

'cell.innerHTML + ='...'不要這樣做。將innerHTML看作是「方法」，而不是「屬性」（儘管它在技術上屬於屬性）。它採用HTML提供的內容，並將其轉換爲等效的文檔對象。您可以輕鬆地將多行字符串連接在一起，並一次分配一次innerHTML。 – Katana314

感謝Katana314。好點子。我沒有想到這一點 - 顯然我只是試圖讓一個長的字符串削減，使其可讀，而無需滾動。 – jazcam

你加入這個處理程序：

$(".showBtn").click(function() { 
    container.toggle(); 
});

與類的所有現有元素聲明爲showBtn。所以最後任何按鈕將切換所有container股利。

您可能想要去與此：

$("#shwBtn'.$value.'").click(function() { 
    container.toggle(); 
});

但那是相當難看。更好的辦法是將其正確設置在按鈕'onclick。

最簡單的，現在將得到使用$.data()方法，通過增加的data-toggle="#ACH'.$value.'"每個按鈕屬性，然後一次添加一個單擊處理所有按鈕：

$(document).ready(function() { 
    $(".showBtn").click(function() { 
     $($(this).data("toggle")).toggle(); 
    }); 
});

或一些接近這一點。

來源

2015-04-29 19:43:34 yergo

美麗。做得好，謝謝！ – jazcam

你真的接近了答案。

$(".showBtn").click(function() { 
    container.toggle(); 
});

這一切的toogle是container的價值，你可能在你$(this)代替：

$(".showBtn").click(function() { 
    $(this).toggle(); 
});

哪裏，這是觸發點擊的對象。

編輯：爲yergo指出，這不會（完全一致）適合你的問題，但你可以很容易地通過改變.showBtn的獨家類觸發此解決這個問題，而這個類分配給您的ACH div

來源

2015-04-29 19:44:08 Rod

將選擇範圍限定在容器中。這可以使用.find()或使用jQuery快捷方式在第二個參數中設置範圍。

$(document).ready(function() { 
var container = $("#ACH'.$value.'"); 
console.log(container.prop("id")); 
$(".showBtn",container).click(function() { //<- button scoped to container 
    container.toggle(); 
}); 
});

來源

2015-04-29 19:58:05

用jquery選擇器捕獲div

回答

相關問題