необходимо повторно включить onmouseon отключен с событием onclick - PullRequest
0 голосов
/ 09 февраля 2019

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

   $(document).ready(function(e) {
$('.input-color').on('mouseover', function(e){

    let color = $(this).parent().find('.color').css('background-color');
    let image = $(this).parent().find('.color').css('background-image');
    console.log(color, 'this');
    if(color) {
        $('#cover-background').show().css({'background-color': color,'width': '400px', 'height': '400px',
            'margin': '0 auto', 'position': 'absolute', 'z-index': 99, 'left': '-60%', 'top': '40%'});
    }
    if(image) {
        $('#cover-background').show().css({'background-image': image,'width': '400px', 'height': '400px',
            'margin': '0 auto', 'position': 'fixed', 'z-index':999, 'left': '20%', 'top':'30%'});
    }
});

$('.input-color').on('mouseout', function(e){

    $('#cover-background').hide();
});
});

И div с id = cover-background. Всплывающее окно отлично работает для первой группы атрибутов.Но после нажатия на один из атрибутов onmouseover не работает.Вы можете увидеть это здесь: http://decoelem2.kamilane.odns.fr/16-15976-table-basse-relevable-extensible-bessy.html (нажмите кнопку PERSONNALISER для отображения первой группы)

Код для отображения блока (это только часть всего кода модуля):

       $output += '<li class="float-xs-left pull-xs-left input-container color_' + k + ((/*(sizecolors && fa_colors[k]['value'] == '') ||*/ (fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)) ? ' fl_color_unavalable_li' : '') + '">\n\
                    <input id="color_' + k + '_' + j + '" class="input-color" type="radio"' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : ' title="' + attributes[l] + '"') + ' \n\
                    data-product-attribute="' + y + '" name="group[' + y + ']" \n\
                    value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 1);">\n\
                    <span ' + ((sizecolors && fa_colors[k]['value'] != '') ? 'class="color_select color" style="background-color: ' + fa_colors[k]['value'] + ';"' : '') + '\n\
                       ' + ((sizecolors && fa_colors[k]['value'] == '') ? 'class="color_select color texture" style="background-image: url('+fa_colors[k]['img']+')"' : '') + '\
                        title="' + attributes[l] + '">\n\
                        <span class="sr-only">' + attributes[l] + '</span>\n\
                        ' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? '<span title="' + not_avialable + '" class="disabled"></span>' : '') + '\n\
                    </span>\n\
                </li>';
        }
    } 

Я могу отправить файл или весь модуль, если вам это нужно.

Большое спасибо за вашу помощь!

[править] Вот все функции(Думаю):

     function generate_html_content_bloc(first, id_group, id_group_next)

{

$output = '';

class_sup = '';

for (j in fa_groups) { //on parcourt les groupes d'attributs

    groupName_id = 'fa_group_' + j;

    groups = fa_groups[j];

    name_group = groups['name'];

    y = j.replace('g_', '');

    if (!first && id_group_next != j){

        if(array_key_exists(j, tread_group)){

            $(".product-variants").append(tread_group[j]);

        }

        continue;

    }

    $output += '<div id="field_' + j + '" class="clearfix product-variants-item">';

    $output += '<span class="control-label"><strong>Choisissez : </strong>' + name_group + ' </span><br />';

    attributes = groups['attributes']; //On a ici le tableau des attributs pour le groupe

    if (groups['group_type'] == 'radio') {

        $output += '<ul id="group_' + j + '" class="radio_btn_list radio_btn_list_' + j + '">';

        $output += '<li id="li_list_0_' + j + '" class="input-container pull-xs-left float-xs-left hide-element ' + class_sup + ' attr_disabled">\n\

          <input id="g_radio_0' + j + '" class="input-radio attribute_radio g_radio_' + j + '" type="radio" data-product-attribute="' + y + '" \n\

              name="group[' + y + ']" value="0"  checked="checked" title="' + not_avialable + '" disabled="true">\n\

          <span class="radio-label radio-label-desabled">&nbsp;</span>\n\

        </li>';

      for (var k in attributes) {

        l = k;

        k = k.replace('k_','');

        if (!fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)

          continue;

        else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes

          continue;

        $output += '<li id="radio_' + k + '" class="input-container pull-xs-left float-xs-left' + ((fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' attr_disabled"' : '') + '">\n\

          <input type="radio"' + ((fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : '') + ' id="g_radio_' + j + '_' + k + '" \n\

            class="input-radio attribute_radio g_radio_' + j + '" data-product-attribute="' + y + '" name="group[' + y + ']" \n\

            value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 0);" />\n\

          <span class="radio-label">' + attributes[l] + '</span>\n\

        </li>';

      }

      $output += '</ul>';

    } else if (groups['group_type'] == 'color') {

        $output += '<ul id="group_' + j + '" class="clearfix">';

        $output += '<li id="li_list_0_' + j + '" class="float-xs-left pull-xs-left input-container color_' + j + ' selected hide-element ' + class_sup + '">\n\

            <input id="color_0_' + j + '" class="input-color" type="radio" data-product-attribute="' + j + '" name="group[' + y + ']" \n\

                value="0" checked="checked" disabled="true">\n\

            <span class="color_select color texture" style="background-image: url(' + fa_col_img_dir + 'croix.png)" title=""></span>\n\

        </li>';

        for (var k in attributes) {

          l = k;

          k = k.replace('k_','');

          if (!fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)

            continue;

          else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes

            continue;

            $output += '<li class="float-xs-left pull-xs-left input-container color_' + k + ((/*(sizecolors && fa_colors[k]['value'] == '') ||*/ (fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)) ? ' fl_color_unavalable_li' : '') + '">\n\

                    <input id="color_' + k + '_' + j + '" class="input-color" type="radio"' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : ' title="' + attributes[l] + '"') + ' \n\

                    data-product-attribute="' + y + '" name="group[' + y + ']" \n\

                    value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 1);">\n\

                    <span ' + ((sizecolors && fa_colors[k]['value'] != '') ? 'class="color_select color" style="background-color: ' + fa_colors[k]['value'] + ';"' : '') + '\n\

                       ' + ((sizecolors && fa_colors[k]['value'] == '') ? 'class="color_select color texture" style="background-image: url('+fa_colors[k]['img']+')"' : '') + '\

                        title="' + attributes[l] + '">\n\

                        <span class="sr-only">' + attributes[l] + '</span>\n\

                        ' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? '<span title="' + not_avialable + '" class="disabled"></span>' : '') + '\n\

                    </span>\n\

                </li>';

        }

    } else if (groups['group_type'] == 'select') {

        $output += '<select class="form-control form-control-select" name="group[' + y + ']"  data-product-attribute="' + y + '" id="group_' + j + '" \n\

            onchange="set_selected_n(\'' + j + '\', this.value,\'' + fa_key_val[j] + '\', 2);">';

        $output += '<option value="0" selected="selected" id="li_list_0_' + j + '">' + name_select + '</option>';

        for (var k in attributes) {

          l = k;

          k = k.replace('k_','');

          if (!fa_gray_select && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)

            continue;

          else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes

            continue;

            $output += '<option value="' + k + '"' + ((fa_gray_select && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" class="fa_disabled"' : '') + '>' + attributes[l] + '</option>';

        }

        $output += '</select>';

    }

    $output += '<span class="attribute-arrow-right arrow-'+groups['group_type']+' group_' + j + ' displaynone icon icon-arrow-right'+(((fa_attr_all && (id_group_next == j/* || first_first*/)) ? ' arrow-right-show' : ''))+'"><i class="material-icons">arrow_forward</i></span>';

  if(fa_attr_all && first_first)

    first_first = false;

  if(first || !fa_attr_all)

    $output += '</div>';

  if (first && !fa_attr_all) //si c'est lors du chargement et que c'est l'option bloc par bloc, on s'arrete à la premiere boucle

      return $output;

  if (!first && fa_attr_all){/*On affiche le résultat quand nous sommes en tout les blocs*/

    $('#field_' + id_group+' .attribute-arrow-right.group_'+ id_group).removeClass('arrow-right-show');

    $('#field_' + j).html($output);

    $output = '';

  }

}

if (first || !fa_attr_all)/*On retourne le résultat quand nous sommes en bloc par bloc*/

    return $output;

}
...