Скрыть Div с помощью динамического переключателя с помощью jQuery?

Факт: я не очень хорошо разбираюсь в jQuery.

Проблема:

У меня есть форма, содержащая динамически отображаемые переключатели. При нажатии на радиокнопку я хочу, чтобы появился div, чтобы дать текстовое объяснение. Внутри «скрытого» div я хочу кнопку или ссылку, чтобы «закрыть» div. У меня есть набор из 27 переключателей, нажатие на каждую РАБОТАЕТ отлично, он показывает правильный div, и я могу щелкнуть другой переключатель, и он переключается на следующий скрытый div, за исключением того, что я не могу скрыть их после! Но я могу скрыть div первого переключателя, но я не могу скрыть ни один из остальных 26, кнопка ничего не делает в этих div.

Вот код моих переключателей:

 $categoryQuery = "SELECT * FROM blah, blah";
 $categoryResult = mysqli_query($link, $categoryQuery );

                    while($row = mysqli_fetch_array($categoryResult)){

       $cat_id = $row['att_cat_id'];
       $category = $row['att_cat_name'];

 echo "<input type='radio' name='AttorneyCategory[]' value='$cat_id'> $category<br />";

Код для моих скрытых div (созданных из моей базы данных):

 $categoryhelpQuery = "SELECT * FROM blah blah";
 $categoryhelpResult = mysqli_query($link, $categoryhelpQuery );

                    while($row = mysqli_fetch_array($categoryhelpResult)){

       $cat_id = $row['att_cat_id'];
       $category = $row['att_cat_name'];
       $category_description = $row['att_cat_description'];

 echo "<div id='blk-$cat_id' class='toHide'>";
 echo "<strong><em><center>Attorney Search Help Center</center></em></strong><button           id='hidr'>Hide</button><br />";
 echo "<strong>$category:</strong>&nbsp;&nbsp;$category_description";
 echo "</div>";

А вот мой код jQuery:

 <script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

  <script type="text/javascript">
 $(function() {
     $("[name='AttorneyCategory[]']").click(function(){
        $('.toHide').hide();
        $("#blk-"+$(this).val()).show();
     });


 });

  $("#hidr").click(function () {
  $('.toHide').hide(1000);
 });


 </script>

Любая помощь была бы замечательной.


dynamic jquery radio-button hidden
person onawire    schedule 02.04.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Во-первых: похоже, ваш

$("#hidr").click(function () {
$('.toHide').hide(1000);
});

вне твоего

$(function(){
   // this part
});

Как я уверен, вы знаете, jQuery запускает все внутри этой функции ПОСЛЕ того, как страница готова к доступу. Сейчас я думаю, что jQuery ищет "#hidr" и не находит их, потому что этот код будет запущен, как только это возможно. Скорее всего, до того, как браузер произвел какие-либо "#hidr"

Но ждать! Есть больше. Посмотри внимательно на

 <button id='hidr'>Hide</button>

Вы используете идентификатор! :) На вашей странице должна быть только одна вещь с любым заданным идентификатором. Попробуйте вместо этого использовать класс. Таким образом, вы можете прикрепить событие .click к каждому $ (". Hidr")

Затем нужно всего лишь сослаться на родителя, чтобы все это исчезло. Нравится:

 $(".hidr").click(function () {
   $(this).parent().hide(1000);
 });

Удачи со страницей юриста!

person fet    schedule 02.04.2012
comment
спасибо, что сообщили мне об ошибке. Я починил, но все равно не работает. Будет скрываться только div первого переключателя - person onawire; 03.04.2012
comment
Совершенно верно! Простите меня. Мне нужно настроить мою учетную запись stackoverflow на оповещение по электронной почте :) Позвольте мне отредактировать свой ответ. - person fet; 03.04.2012

arrow_upward
0
arrow_downward

Можете ли вы использовать .toggle вместо .hide (1000)?

person upsidedowncreature    schedule 02.04.2012