embed show hide in JS toggle

Question

Я пытаюсь вставлять и запускать шоу/скрыть в этом переключателе.

$(document).ready(function() { 

$(function() { 
$('#toggle1').click(function() { 
    $('.toggle').hide('1000'); 
    $('.toggle').html('I would like to show a new div within this toggle'); 
$('.toggle').slideToggle('1000'); 

return false; 
    }); 
}); 

Так что вроде как переключатель в тумблере.

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

Нажмите этот> этот триггер> внутри этого DIV вы можете щелкнуть по цвету> BOOM!

Это дрифт.

Я ищу решение, которое имеет смысл.

Answer 1

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

<div class="wrapper"> 
    <!-- Select item --> 
    <div class="select_item"> 
     <ul class="item_list"> 
      <li class="item active" data-item-id="1"><img class="item_thumb" src="1.jpg"></li> 
      <li class="item" data-item-id="2"><img class="item_thumb" src="2.jpg"></li> 
      <li class="item" data-item-id="3"><img class="item_thumb" src="3.jpg"></li> 
     </ul> 
    </div> 
    <!-- Select color --> 
    <div class="select_color"> 
     <ul class="color_list"> 
      <li class="color active" data-color-id="1"><span class="color_thumb"><!-- Color --></span></li> 
      <li class="color" data-color-id="2"><span class="color_thumb"><!-- Color --></span></li> 
      <li class="color" data-color-id="3"><span class="color_thumb"><!-- Color --></span></li> 
      <li class="color" data-color-id="4"><span class="color_thumb"><!-- Color --></span></li> 
      <li class="color" data-color-id="5"><span class="color_thumb"><!-- Color --></span></li> 
     </ul> 
    </div> 
</div> 

и выполнить поведение выбора, как это:

function getSelection() { 
    var selection = { }; 
     selection['item_id'] = parseInt($('.item.active').attr('data-item-id')); 
     selection['color_id'] = parseInt($('.color.active').attr('data-color-id')); 
    return selection; 
} 

$(document).ready(function() { 
    //Update the current item 
    $('.item_thumb').on('click', function(e) { 
     $('.item').removeClass('active'); 
     $(e.currentItem).parent().addClass('active'); 
    }); 
    //Update the current color 
    $('.color_thumb').on('click', function(e) { 
     $('.color').removeClass('active'); 
     $(e.currentItem).parent().addClass('active'); 
    }); 
}); 

Это предполагает, что каждый родительский элемент требует, чтобы выбрать цвет (то есть - тот же тип опция). Если корневые элементы каждого требуют различных типов параметров (например, - цвет, размер и т.д.), вы можете попробовать вложенности варианты каждого элемента внутри контейнера элемента:

<div class="wrapper"> 
    <!-- Contains all items with options --> 
    <ul class="items"> 
     <!-- Item 1, has a color option --> 
     <li class="item active" data-item-id="1"> 
      <div class="item_thumb"><img src="item1.jpg"></div> 
      <ul class="options"> 
       <li class="option active" data-option-id="1"><span class="color_thumb"><!-- Color --></span></li> 
       <li class="option" data-option-id="2"><span class="color_thumb"><!-- Color --></span></li> 
       <li class="option" data-option-id="3"><span class="color_thumb"><!-- Color --></span></li> 
      </ul> 
     </li> 
     <!-- Item 2, has a size option --> 
     <li class="item" data-item-id="2"> 
      <div class="item_thumb"><img src="item2.jpg"></div> 
      <ul class="options"> 
       <li class="option active" data-option-id="1"><span class="size_label">Small</span></li> 
       <li class="option" data-option-id="2"><span class="size_label">Medium</span></li> 
       <li class="option" data-option-id="3"><span class="size_label">Large</span></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

и выполнить поведение выбора, как это:

function getSelection() { 
    var current_item = $('.item.active'); 
    var selection = { }; 
     selection['item_id'] = parseInt(current_item.attr('data-item-id')); 
     selection['item_option'] = current_item.find('.option.active').attr('data-option-id'); 
    return selection; 
} 

Ваша страница может быть намного сложнее в зависимости от глубины ваших опций (опция -> suboption -> sub-suboption), для чего может потребоваться еще один код для конкретного случая. Хотя я не понимаю ваших точных требований (или того, что вы подразумеваете под «переключением»), это может помочь вам двигаться в правильном направлении.