Переключение нескольких элементов путем нажатия на разные объекты с помощью одной функции в jQuery - PullRequest
Новая
       8

Переключение нескольких элементов путем нажатия на разные объекты с помощью одной функции в jQuery

0 голосов
/ 07 декабря 2011

У меня 9 изображений и 9 таблиц. Каждое изображение действует как «кнопка», которая вызывает переключение таблицы, к которой оно относится. Изначально таблицы скрыты с помощью display: none, поэтому при нажатии на изображение 1 отображается таблица 1, но при нажатии на изображение 1 также обеспечивается скрытие таблиц 2-9, поскольку все они отображаются в одном и том же месте. Если остальные не скрыты, то один, на который я нажимаю, чтобы переключить его таблицу, появится под той, которая уже отображается.

Основной код для достижения этой цели выглядит так: 

$('#img1').click(function(){
    $('#tbl2, #tbl3, #tbl4, #tbl5, #tbl6, #tbl7, #tbl8, #tbl9').hide();
    $('#tbl1').toggle('fast');
 });

За исключением того, что я повторяю это для каждой функции щелчка изображения. Я хотел бы создать функцию или что-то такое, что позволит мне значительно упростить этот код, так как он чрезвычайно избыточен. Есть предложения?

Ответы [ 3 ]

1 голос
/ 07 декабря 2011

Вы можете установить один класс для всех элементов и скрыть их вместе 

<div id="tbl2" class="table"></div>
<div id="tbl3" class="table"></div>
<div id="tbl4" class="table"></div>

$(".table").hide();

Шай.

0 голосов
/ 17 февраля 2012

Я получил это, чтобы работать с помощью этого кода. Возможно, это поможет кому-то еще в будущем. 

$("#contianer img").click(function() {
    $('#tbl1_img, #tbl2_img, #tbl3_img, #tbl4_img, #tbl5_img, #tbl6_img, #tbl7_img, #tbl8_img, #tbl9_img').removeClass('selected');
    $(this).addClass('selected');
    var tblToShow = $(this).attr('id').replace('_img', '');
    $('#tbl1, #tbl2, #tbl3, #tbl4, #tbl5, #tbl6, #tbl7, #tbl8, #tbl9').addClass('hidden').removeClass('fadeIn');
    $('#'+tblToShow).toggleClass('hidden');
    $('#'+tblToShow).addClass('fadeIn');
});
0 голосов
/ 07 декабря 2011

Попробуйте добавить класс ко всем изображениям, скажем, btn, тег title="1" и т. Д. Положите все свои таблицы в div с идентификатором скажем info.

Может выглядеть так: 

<img src="..." class="btn" title="1" />
<img src="..." class="btn" title="2" />
//...
<div id="info">
  <table id="table1"></table>
  <table id="table2"></table>
</div>

Теперь я написал бы функцию следующим образом: 

$('.btn').click(function(){
   //hide all the tables
   $('#info table').hide();
   //get the title
   var t = $(this).attr('title');
   //assuming a table is called "table1"
   $('#table'+t).fadeIn();
});

Надеюсь, это приведет вас в правильном направлении:)

...