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

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

0 голосов
/ 03 апреля 2012

Факт: я не так хорош с jQuery.

Проблема:

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

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

 $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>

Любая помощь будет отличной.

Ответы [ 2 ]

2 голосов
/ 03 апреля 2012

Первое: похоже, ваш 

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

находится за пределами вашего 

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

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

Но подождите!Есть еще кое-что.Посмотрите внимательно на 

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

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

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

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

Удачи на вашей адвокатской страничке!

0 голосов
/ 03 апреля 2012

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

...