JQuery переключатель "переменная" DIV

Question

У меня есть страница результатов из БД, в каждой строке у меня есть кнопка показать / скрыть, которая должна показать / скрыть контейнер с $ title ....

Я пытался с jquery, но это не будет работать: (

<div class="container">
 <div class="show_hide_button_<? echo $article_id_tmp; ?>"><a href="#">show/hide</a></div>
    <div class="show_hide_container_<? echo $article_id_tmp; ?>">
</div>
</div>



<script type="text/javascript">
var div_id = '$article_id_tmp';

div_id_b+='.show_hide_button_'+ 'div_id';
div_id_c+='.show_hide_container_'+ 'div_id';

$(function(){
  $('div_id_b').click(function(){
     $('div_id_c').toggle();     
  });
});

спасибо

Answer 1

Может быть, вам нужно упростить разметку.Используйте некоторые классы, чтобы отметить кнопку show/hide, а некоторые классы - вам content контейнер.И сценарий будет очень маленьким и понятным:

$('.container .show_hide_button a').click(function() {
    $(this).parent().siblings('.show_hide_container').toggle();
});

Живая демоверсия: http://jsfiddle.net/gYkKz/4/

Answer 2

Ваши переменные являются переменными, а не строками, поэтому вы не должны заключать их в пробелы:

var div_id = '$article_id_tmp';

div_id_b+='.show_hide_button_'+ 'div_id';
div_id_c+='.show_hide_container_'+ 'div_id';

$(function(){
  $(div_id_b).click(function(){
     $(div_id_c).toggle();     
  });
});

Кроме того, вам нужно echo $article_id_tmp в JS:

var div_id = '<?php echo $article_id_tmp ?>';

div_id_b+='.show_hide_button_'+ 'div_id';
div_id_c+='.show_hide_container_'+ 'div_id';

$(function(){
  $(div_id_b).click(function(){
     $(div_id_c).toggle();     
  });
});

Кроме того, classes обычно используются для группировки похожих элементов на странице; однако вы назначаете разные классы для каждого элемента. Для согласованности вы можете рассмотреть возможность использования «id» вместо класса или, что более предпочтительно, что-то вроде следующего:

<div class="container">
   <div class="show_hide_button"><a href="#">show/hide</a></div>
   <div class="container">
   </div>
</div>

$('.show_hide_button').click(function () {
    $(this).next('.container').toggle();
});

Конечно, вы можете удалить класс container и просто использовать $(this).next().toggle()

Answer 3

Для меня это выглядит так, как будто вы должны написать

var div_id = '<?php echo $article_id_tmp; ?>';

вместо

var div_id = '$article_id_tmp';

, так что вы фактически вводите правильную строку.В противном случае div_id всегда будет string '$article_id_tmp'

Answer 4

В коде JavaScript должна быть правильно выведена переменная PHP, как вы уже сделали в HTML.Поэтому вам нужно изменить:

var div_id = '$article_id_tmp';

на

var div_id = '<?php echo $article_id_tmp; ?>';

Для этого необходимо, чтобы <script> выводил inline , как в вашем вопросе.JavaScript не может существовать в этой форме в отдельном файле.

И , как ответил @Matt, div_id является переменной и не должен заключаться в кавычки при объединении при назначениипеременные div_id_b и div_id_c.Назначение должно быть:

var div_id_b = '.show_hide_button_' + div_id;
var div_id_c = '.show_hide_container_' + div_id;

И и, наконец, селекторы jQuery не требуют цитирования, поскольку они уже являются переменными.Существующий код будет искать элемент с именем div_id_b, который не существует.

Правильные селекторы должны быть $(div_id_b).click(...) и $(div_id_c).toggle();