Используйте тот же класс для различных флажков с помощью JQuery

Question

У меня есть MULTISELECT выпадающий список, который имеет 8 цветов в хэш% all_colors:

my %all_colors = (
    1 => 'Red', 
    2 => 'Yellow', 
    3 => 'Orange', 
    4 => 'Blue', 
    5 => 'Black', 
    6 => 'Brown', 
    7 => 'Green', 
    8 => 'White', 
); 

Я поставил его в раскрывающемся списке, как это:

my $color_selector = '<select name="all_colors">'; 

foreach my $color (sort {$all_colors{$a} cmp $all_colors {$b}} keys %all_colors) { 
    $color_selector .= qq~<option value="$color">$all_colors{$color}</option>~; 
} 
$color_selector .= '</select>'; 

<div><% $color_selector %></div> 

И в Perl я добавил еще одну константу, чтобы выбрать checkbox1 и использовать константу в perl, чтобы вызвать этот флажок. Остальные цвета должны быть отмечены при нажатии кнопки «Остальные цвета».

use constant MAIN_COLORS => { 
    1 => 'Red', 
    2 => 'Orange', 
    3 => 'Green', 
    4 => 'White', 
}; 

my $main_colors = MAIN_COLORS; 

Я написал HTML код для флажка и JQuery, чтобы выбрать цвет из выпадающего меню при щелчке флажка.

<div> 
    <input type="checkbox" data-class="maincolors" name="colorcheckbox" value="<% $main_colors %>" class="inputCheckbox" /> Main Colors 
    <input type="checkbox" data-class="restofcolors" name="colorcheckbox" class="inputCheckbox" /> Rest of the Colors 
</div> 

jQuery(document).ready(function() { 
    jQuery('input[name="colorcheckbox"]').click(function() { 
    var isselect  = ''; 
    var main_colors = jQuery('input[data-class="main-colors"]').val().split('|'); 
    var colorsToSelect = jQuery(this).val(); 

    if (jQuery(this).prop('checked')) { 
     isselect = 'selected'; 
    } 

    if (jQuery(this).data('class') == 'main-colors') { 
     for (var i=0; i < main_colors.length; i++) { 
      jQuery('#allcolors option[value=' + main_colors[i] + ']').prop('selected', isselect); 
     } 
    } else { 
     for (var i=0; i < jQuery('#allcolors option').length; i++){ 
      if (jQuery.inArray(jQuery('#allcolors option')[i].value, main_colors) < 0) { 
       jQuery('#allcolors option')[i].selected = isselect; 
      } 
     } 
    } 

    if (jQuery(this).prop('checked') == true) { 
     if (colorsToSelect == 'maincolors') { 
      jQuery('#multipeColorSelect option').prop('selected', true); 
     } else if (colorsToSelect == 'restofcolors') { 
      jQuery('#multipeColorSelect option').prop('selected', true); 
     } 
    } else { 
     if (colorsToSelect == 'maincolors') { 
      jQuery('#multipeColorSelect option').prop('selected', false); 
     } else if (colorsToSelect == 'restofcolors') { 
      jQuery('#multipeColorSelect option').prop('selected', false); 
     } 
    } 
    }); 

    jQuery('#allcolors').change(function() { 
    jQuery('.inputCheckbox').prop('checked', false); 
    }); 
}); 

Если я хочу добавить еще один флажок в будущем, которое включает в себя одну из групп основных цветов, то я хочу, чтобы добавить другой класс, который не является хорошей идеей. Поэтому мое требование: пока для вышеприведенного кода я не хочу использовать разные классы «maincolors» и «restofcolors», вместо этого хочу решить это, используя тот же класс (только для одного класса для всех флажков). Пожалуйста помоги.

Answer 1

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

my @color_data = (
    { value => 'main', title => 'Main Colors', colors => [ 1, 3, 7, 8 ] }, 
    { value => 'combo1', title => 'Combination 1', colors => [ 2, 4, 5, 6 ] }, 
    { value => 'combo2', title => 'Combination 2', colors => [ 1, 2, 3, 6 ] } 
); 

Вы можете видеть, что у нас есть данные, необходимые для создания элементов формы, а colors массив содержит идентификаторы (из вашего хэша %all_colors) из цветов в этой комбинации. Теперь давайте создадим форму:

# create the checkboxes using @color_data: 
my $html = ''; 
for (@color_data) { 
    $html .= "<input type='checkbox' name='colorcheckbox' value='" 
    . $_->{value} . "' id='colorcbox_" 
    . $_->{value} . "' />\n<label for='colorcbox_" 
    . $_->{value} . "'>" . $_->{title} . "</label>\n" 
} 
say $html; 

Это дает выход:

<input type='checkbox' name='colorcheckbox' value='main' id='colorcbox_main' /> 
<label for='colorcbox_main'>Main Colors</label> 
<input type='checkbox' name='colorcheckbox' value='combo1' id='colorcbox_combo1' /> 
<label for='colorcbox_combo1'>Combination 1</label> 
<input type='checkbox' name='colorcheckbox' value='combo2' id='colorcbox_combo2' /> 
<label for='colorcbox_combo2'>Combination 2</label> 

Обратите внимание, что текст для каждого чекбокса окружен <label> элементом: это делает текст интерактивным, и является semantically- правильный способ создания меток. Каждый флажок имеет идентификатор, который делает его легко ориентированным на javascript, и я лишил избыточный class="inputCheckbox" - если вы собираетесь применить класс ко всем этим флажкам, было бы лучше применить стиль во всем мире (т. Е. в вашей таблице стилей для страницы - установите все флажки для отображения того же) или примените стиль к родительскому элементу этих флажков.

Для элемента select я бы посоветовал использовать атрибут data-class для получения информации о том, какая из цветовых комбинаций принадлежит к цвету. Вы можете сделать это в одном (немного сложнее) заявление, проверяя, существует ли или нет цвет ID в массиве цветов для каждой группы в @color_data:

for my $c (sort keys %all_colors) { 
    $html .= "<option value='$all_colors{$c}' data-class='" 
    . join(" ", grep defined, 
     map { if (grep { $_ eq $c } @{$_->{colors}}) { $_->{value} } else { } } @color_data) 
    . "'>$all_colors{$c}</option>\n"; 
} 

Выход:

<option value='Red' data-class='main combo2'>Red</option> 
<option value='Yellow' data-class='combo1 combo2'>Yellow</option> 
<option value='Orange' data-class='main combo2'>Orange</option> 
<option value='Blue' data-class='combo1'>Blue</option> 
<option value='Black' data-class='combo1'>Black</option> 
<option value='Brown' data-class='combo1 combo2'>Brown</option> 
<option value='Green' data-class='main'>Green</option> 
<option value='White' data-class='main'>White</option> 

Вы можете увидеть что атрибут data-class содержит значение каждой записи в @color_data, к которой он принадлежит.Несколько сложнее код выполняет следующие действия:

# join together the members of an array with a space 
join(" ", 
# grep takes only the defined members of the array 
grep defined, 
# map: for every member of the array color_data 
map { 
     # if $c exists in the array $_->{colors} (i.e. the list of colours) 
     if (grep { $_ eq $c } @{$_->{colors}}) 
     # output $_->{value} if it does ('main', 'combo1', 'combo2', etc) 
     { $_->{value} } 
     # otherwise, output undefined (this has to be here or perl outputs '0') 
     else { } 
} @color_data) 

Вот полученная форма:

<fieldset> 
<input type='checkbox' name='colorcheckbox' value='main' id='colorcbox_main' /> 
<label for='colorcbox_main'>Main Colors</label> 
<input type='checkbox' name='colorcheckbox' value='combo1' id='colorcbox_combo1' /> 
<label for='colorcbox_combo1'>Combination 1</label> 
<input type='checkbox' name='colorcheckbox' value='combo2' id='colorcbox_combo2' /> 
<label for='colorcbox_combo2'>Combination 2</label> 
</fieldset> 
<fieldset> 
<label for='colorselect'>Pick some colours!</label> 
<select name='all_colors' id='colorselect' multiple='multiple' size='8'> 
<option value='Red' data-class='main combo2'>Red</option> 
<option value='Yellow' data-class='combo1 combo2'>Yellow</option> 
<option value='Orange' data-class='main combo2'>Orange</option> 
<option value='Blue' data-class='combo1'>Blue</option> 
<option value='Black' data-class='combo1'>Black</option> 
<option value='Brown' data-class='combo1 combo2'>Brown</option> 
<option value='Green' data-class='main'>Green</option> 
<option value='White' data-class='main'>White</option> 
</select> 
</fieldset> 

Полный код для генерации этой формы:

my %all_colors = (
    1 => 'Red', 
    2 => 'Yellow', 
    3 => 'Orange', 
    4 => 'Blue', 
    5 => 'Black', 
    6 => 'Brown', 
    7 => 'Green', 
    8 => 'White', 
); 

my @color_data = (
    { value => 'main', title => 'Main Colors', colors => [ 1, 3, 7, 8 ] }, 
    { value => 'combo1', title => 'Combination 1', colors => [ 2, 4, 5, 6 ] }, 
    { value => 'combo2', title => 'Combination 2', colors => [ 1, 2, 3, 6 ] } 
); 
my $html = "<fieldset>\n"; 
for (@color_data) { 
    $html .= "<input type='checkbox' name='colorcheckbox' value='" . $_->{value} . "' id='colorcbox_" . $_->{value} . "' />\n<label for='colorcbox_" . $_->{value} . "'>" . $_->{title} . "</label>\n" 
} 
$html .= "</fieldset>\n<fieldset>\n<label for='colorselect'>Pick some colours!</label>\n<select name='all_colors' id='colorselect' multiple='multiple' size='" . (scalar keys %all_colors) . "'>\n"; 

for my $c (sort keys %all_colors) { 
    $html .= "<option value='$all_colors{$c}' data-class='" . join(" ", grep defined, map { if (grep { $_ eq $c } @{$_->{colors}}) { $_->{value} } else { } } @color_data) . "'>$all_colors{$c}</option>\n"; 
} 
$html .= "</select>\n</fieldset>\n"; 

say $html; 

Теперь, когда поколение форма из Кстати, вы можете сосредоточиться на написании javascript! ;)