захват div с jquery селектором

Question

Я в тупике. У меня есть форма, которая динамически заполняется из результатов запроса mysql. В зависимости от того, сколько строк возвращается, процедура добавит div для каждой строки и заполнит каждый div вопросником. Первоначально каждый div скрыт, и для каждого div есть кнопка переключения и описание содержимого этой записи в таблице mysql.

Каждый div динамически присваивает идентификатор, например, «ACH», а также номер индекса записи, возвращаемой из запроса mysql. В примере Я сейчас работаю, есть два div, один - «ACH925», а другой «ACH926», и это отчетливо видно в отладчике.

Проблема в том, что кнопка переключения для первого div переключает оба. Нет проблем с кнопкой переключения для div2; он только переключает div2. Кроме того, кнопка переключения для div1 имеет обратимый эффект на div2. Если оба div не находятся в одном и том же режиме видимости, кнопка переключения div1 установит div2 в скрытое, если div1 установлен для отображения или отображается, когда div1 скрыт.

Я хочу, чтобы каждый div был независимым и показывал или скрывал один или оба.

некоторые HTML код, написанный в PHP строку, где значение $ порядковый номер возвращается из запроса:

$(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)).'"; 
    } 
}); 

и следующий код, где выполняются клеванты:

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

и наконец, это из консоли, где заметны заметки:

Мысли, кто-нибудь?

Answer 1

Вы добавляете эти обработчики:

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

ко всем существующим элементам с классом, заявленных в качестве showBtn. Таким образом, в конце любая кнопка переключит все container divs.

Вы можете пойти с этим:

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

, но тот довольно некрасиво. Лучше было бы установить его правильно в кнопках «onclick.

Самый простой сейчас было бы получить применение $.data() метода, добавляя к каждому атрибуту кнопки data-toggle="#ACH'.$value.'" и после добавления обработчика щелчка ко всем кнопкам сразу:

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

или что-то близко к этому.

Answer 2

Вы действительно близко подошли к ответу.

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

это Toogle все, что значение container, вы могли бы вы $(this) вместо:

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

где это объект, который вызвал щелчок.

---

Edit: , как yergo отметил, это не будет (точно) приспосабливать вашу проблему, но вы можете легко исправить, изменив .showBtn в эксклюзивном классе, чтобы вызвать это, и назначить этот класс в ACH divs

Answer 3

Сфера применения в контейнере. Это можно сделать, используя .find() или с ярлыком jQuery, где вы задаете область действия во втором аргументе.

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